如何默认打开 Bootstrap 菜单？答案

【问题标题】：How to open by default the Bootstrap menu?如何默认打开 Bootstrap 菜单？
【发布时间】：2018-06-20 23:29:10
【问题描述】：

我有一个带有“Bootstrap 3.3.7”的网站，我希望菜单默认打开。

这是我的 HTML 代码：

<div id="#block-menuprincipal">
<ul class="nav navbar-nav">
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Menu principal</a>
    <ul class="dropdown-menu">
      <li>
        <a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Profils</a>
      </li>
      <li>
        <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg"></i> Boutiques</a>
      </li>
      <li>
        <a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg"></i> Produits</a>
      </li>
      <li>
        <a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg"></i> Services</a>
      </li>
      <li>
        <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg"></i> Groupes</a>
      </li>
      <li>
        <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg"></i> Annonces</a>
      </li>
      <li>
        <a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg"></i> Articles</a>
      </li>
      <li>
        <a href="/discussion" data-drupal-link-system-path="discussion"><i class="fas fa-comments fa-lg"></i> Discussions</a>
      </li>
      <li>
        <a href="/recette" data-drupal-link-system-path="recette"><i class="fas fa-utensils fa-lg"></i> Recettes</a>
      </li>
      <li>
         <a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fas fa-map-signs fa-lg"></i> Itinéraires</a>
      </li>
      <li>
        <a href="/evenement" data-drupal-link-system-path="evenement"><i class="fas fa-calendar fa-lg"></i> Événements</a>
      </li>
    </ul>
  </li>
</ul>
</div>

如何告诉引导程序默认打开菜单？

打开的路径是#block-menuprincipal .dropdown

如果我尝试以下代码，Bootstrap 或 Drupal 会自动删除打开的类：

$("#block-menuprincipal .dropdown").addClass('open');

想用JS打开但不知道代码：

$("#block-menuprincipal .dropdown").dropdown('show');
});

上面的代码不起作用，因为打开的类被添加到<ul class="nav navbar-nav"> 通常她应该被添加到<li class="dropdown">

这是https://www.s1biose.com页面的链接，您必须点击左上角的菜单。 “主菜单”应默认打开。

更新

经过多次测试，collapse 导致菜单关闭。

我添加了这段代码在折叠后打开菜单，但它不起作用：

$('#navbar-collapse-first').on('show.bs.collapse', function () {
       $('#block-menuprincipal .dropdown').dropdown('show');
})

【问题讨论】：

views-manage-menu在哪里
@guradio 这是drupal的一个块。如果此块存在，则菜单必须默认打开
您使用的是哪个菜单？自定义菜单？还是 Bootstrap 菜单？
@mathieu，检查我制作的这个小提琴，只是为了举例说明你的场景并告诉我它和你的问题有什么区别。请注意，我已向主导航栏添加了一个“id”，并为其添加了“views-manage-menu”类。 fiddle
我更新了我的问题

标签： javascript jquery twitter-bootstrap menu dropdown

【解决方案1】：

你可以这样做：https://codepen.io/creativedev/pen/bKvabG

$(function() {
   $('ul[class="navbar-nav"] li[class="dropdown"]').addClass('open');
});

【讨论】：

我用更简单的代码和指向我网站的链接更新了我的问题。我测试了你的代码，它对我不起作用。

【解决方案2】：

我已经改变了jquery：

$('#block-menuprincipal').on('shown.bs.collapse', function () {  
    $(this).find(".dropdown-toggle").dropdown("toggle");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed btn btn-success" data-toggle="collapse" data-target="#block-menuprincipal" aria-expanded="false">
            menu
          </button>
        </div>

        <div id="block-menuprincipal" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fas fa-plus-circle fa-lg"></i> Menu principal</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/profil" data-drupal-link-system-path="profil"><i class="fas fa-id-card fa-lg"></i> Profils</a>
                  </li>
                  <li>
                    <a href="/boutique" data-drupal-link-system-path="boutique"><i class="fas fa-shopping-bag fa-lg"></i> Boutiques</a>
                  </li>
                  <li>
                    <a href="/produit" data-drupal-link-system-path="produit"><i class="fas fa-gift fa-lg"></i> Produits</a>
                  </li>
                  <li>
                    <a href="/service" data-drupal-link-system-path="service"><i class="fas fa-sign-language fa-lg"></i> Services</a>
                  </li>
                  <li>
                    <a href="/groupe" data-drupal-link-system-path="groupe"><i class="fas fa-users fa-lg"></i> Groupes</a>
                  </li>
                  <li>
                    <a href="/annonce" data-drupal-link-system-path="annonce"><i class="fas fa-newspaper fa-lg"></i> Annonces</a>
                  </li>
                  <li>
                    <a href="/article" data-drupal-link-system-path="article"><i class="fas fa-file-alt fa-lg"></i> Articles</a>
                  </li>
                  <li>
                    <a href="/discussion" data-drupal-link-system-path="discussion"><i class="fas fa-comments fa-lg"></i> Discussions</a>
                  </li>
                  <li>
                    <a href="/recette" data-drupal-link-system-path="recette"><i class="fas fa-utensils fa-lg"></i> Recettes</a>
                  </li>
                  <li>
                     <a href="/itineraire" data-drupal-link-system-path="itineraire"><i class="fas fa-map-signs fa-lg"></i> Itinéraires</a>
                  </li>
                  <li>
                    <a href="/evenement" data-drupal-link-system-path="evenement"><i class="fas fa-calendar fa-lg"></i> Événements</a>
                  </li>
                </ul>
              </li>
            </ul>
        </div>

【讨论】：

我用更简单的代码和指向我网站的链接更新了我的问题。我测试了你的代码，它对我不起作用。
可能是由于“折叠”菜单检查我编辑的答案
"Show" 用于在 bootstrap 中为元素添加 'display: block' 属性，如果要添加 'show' 类，请将其添加到 '.dropdown-menu' 而不是 '.下拉菜单'
$("#navbar-collapse-first .dropdown .dropdown-menu").addClass('show');
我的代码不行思路是在折叠折叠后打开菜单。你怎么看？