Bootstrap 3下拉菜单无需双击切换的解决方案求助

我完全懂你想要的效果——点击一个下拉菜单时自动收起另一个已经展开的，不用先手动关闭当前的。Bootstrap 3默认的下拉组件确实没有这个互斥行为，不过只需要加一点自定义jQuery代码就能实现，而且完全不用改太多原有结构。

解决方案步骤： #

1. 调整HTML结构：先把所有下拉切换按钮的data-toggle="dropdown"属性去掉，避免和我们的自定义逻辑冲突。你的HTML修改后应该是这样：

<nav>
  <ul class="nav nav-pills nav-stacked">
    <li class="dropdown">
      <a class="dropdown-toggle">Option 1<span class="caret"></span></a>
      <ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
        <li><a href="link.php">Link</a></li>
        <li><a href="link.php">Link</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle">Option 2<span class="caret"></span></a>
      <ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
        <li><a href="link.php">Link</a></li>
        <li><a href="link.php">Link</a></li>
      </ul>
    </li>
  </ul>
</nav>

2. 添加自定义jQuery代码：这段代码会帮你实现互斥展开，以及点击页面外部关闭下拉的功能（可选但更友好）：

$(document).ready(function() {
  // 处理下拉菜单的点击切换
  $('.nav-pills .dropdown-toggle').click(function(e) {
    e.stopPropagation(); // 防止事件冒泡到document的点击事件
    var $currentDropdown = $(this).closest('.dropdown');
    // 关闭所有非当前的下拉菜单
    $('.nav-pills .dropdown').not($currentDropdown).removeClass('open');
    // 切换当前下拉菜单的展开/收起状态
    $currentDropdown.toggleClass('open');
  });

  // 点击页面其他区域关闭所有下拉菜单
  $(document).click(function() {
    $('.nav-pills .dropdown').removeClass('open');
  });
});

代码说明： #

• closest('.dropdown')：找到当前点击按钮所在的下拉容器（<li class="dropdown">）
• removeClass('open')：Bootstrap 3通过open类控制下拉菜单的显示/隐藏，移除这个类就会收起下拉
• toggleClass('open')：切换当前下拉容器的展开状态，点同一个菜单可以收起它
• e.stopPropagation()：避免点击下拉按钮时触发document的点击事件导致菜单立刻关闭

这样设置后，你就能实现想要的效果：点击菜单1展开，再点击菜单2时自动收起菜单1并展开菜单2，点击同一个菜单也能正常切换收起/展开，点击页面其他区域还能关闭所有下拉，体验更流畅。

内容的提问来源于stack exchange，提问作者JustBlossom