Question

我有一个带有“ 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会自动删除open类：

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

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

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

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

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

更新

经过几次测试，折叠会导致菜单关闭。

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

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

Answer 1

您可以这样操作：https://codepen.io/creativedev/pen/bKvabG

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

Answer 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>

默认情况下如何打开Bootstrap菜单？

2 个答案: