Bootstrap 3.7面板内多个下拉按钮同时展开问题求助

这个问题我之前也碰到过，核心原因是你没有给每个下拉按钮和对应的菜单添加独立的容器，Bootstrap的下拉插件没办法正确识别每个按钮对应的菜单，所以点击任意一个按钮时，所有下拉菜单都会被触发展开。

正确的解决方法 #

Bootstrap 3的下拉组件要求每个下拉按钮和它对应的下拉菜单必须包裹在一个带有.dropdown类的容器中，这样每个下拉组都是独立的，插件就能准确关联按钮和菜单了。

修改后的代码如下：

<div class="static"> 
  <div class ="container"> 
    <div class="panel panel-default"> 
      <div class="panel-heading"> 
        <ul class="nav nav-pills nav-justified" role="tablist"> 
          <li class="active"><a href="#">Booking</a></li> 
          <li><a href="#">Flight Times</a></li> 
          <li><a href="#">My Trips</a></li> 
        </ul> 
      </div> 
      <div class="panel-body">
        <!-- 第一个下拉组，包裹在.dropdown容器中 -->
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
            From <span class="caret"></span>
          </button> 
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
            <li><a href="#">London Stanstead Airport (<strong>STN</strong>)</a></li> 
          </ul>
        </div>

        <!-- 第二个下拉组，包裹在.dropdown容器中 -->
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown">
            To <span class="caret"></span>
          </button> 
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu2"> 
            <li><a href="#">Manchester (<strong>MAN</strong>)</a></li> 
            <li><a href="#">Glasgow (<strong>GLA</strong>)</a></li> 
            <li><a href="#">Dublin (<strong>DUB</strong>)</a></li> 
            <li><a href="#">Paris (<strong>CDG</strong>)</a></li> 
            <li><a href="#">Madrid (<strong>MAD</strong>)</a></li> 
            <li><a href="#">Brussels (<strong>BRU</strong>)</a></li> 
          </ul>
        </div>
      </div> 
    </div> 
  </div> 
</div>

额外优化点 #

我还给下拉菜单加上了aria-labelledby属性，对应按钮的id，这不仅符合无障碍访问的规范，也能进一步明确按钮和菜单的关联关系，让插件的识别更准确。

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