javascript - 如何默认打开Bootstrap菜单？

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>

如何告诉 bootstrap 默认打开菜单？

打开路径为#block-menuprincipal .dropdown

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

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

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

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

上面的代码不起作用，因为类 open 添加到 <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');
});