Bootstrap 4打开多个导航栏下拉菜单，无需切换

Posted 2023-05-08

【中文标题】Bootstrap 4打开多个导航栏下拉菜单，无需切换

【英文标题】：Bootstrap 4 open multiple navbar dropdown without toggle

【发布时间】：2019-11-15 18:55:36

【问题描述】：

我正在使用带有多级垂直侧边栏菜单的 Bootstrap 4。单击任何下拉项目时，先前打开的下拉菜单会自动关闭。问题：我不希望之前打开的下拉菜单自行关闭。用户可以打开多个下拉菜单

尝试了几个脚本来检测当前具有类显示的导航项，但没有结果。

<ul class="navbar-nav flex-column w-100">
  <li class="nav-item ">
   <a href="#" role="button" class="nav-link">Dashboard</a>
  </li>
  <li class="nav-item dropdown">
   <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">Data Entry</a>
   <div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
     <a class="dropdown-item" role="button" href="/#">Add Job</a>
     <a class="dropdown-item" role="button" href="#">Auto Upload</a>
     <a class="dropdown-item" role="button" href="#">Manage Centah</a>
     <a class="dropdown-item" role="button" href="#">Manage TGS</a>
   </div>
  </li>
  <li class="nav-item dropdown">
   <a href="#" class="nav-link dropdown-toggle" role="button" data-toggle="collapse" aria-haspopup="true" aria-expanded="false">Data Entry</a>
   <div class="dropdown-menu " aria-labelledby="dropdownMenuButton">
     <a class="dropdown-item" role="button" href="/#">Add Job</a>
     <a class="dropdown-item" role="button" href="#">Auto Upload</a>
     <a class="dropdown-item" role="button" href="#">Manage Centah</a>
     <a class="dropdown-item" role="button" href="#">Manage TGS</a>
   </div>
  </li>
</ul>

【参考方案1】：

单击包含复选框的下拉项目时，菜单将关闭。 插件不处理下拉项目的内容。无论您在下拉菜单中有什么，点击它都会关闭菜单。

你可以在这里追踪它：https://github.com/twbs/bootstrap/issues/21941