Bootstrap两个下拉菜单显示相同列表问题排查及配置问询

问题产生原因 #

• 你没有将每个下拉菜单的触发按钮（dropdown-toggle）和对应的菜单列表（dropdown-menu）做唯一绑定，也没有给每个下拉组包裹独立的.dropdown父容器。Bootstrap的下拉插件在触发点击事件时，没有明确绑定目标的情况下，会优先匹配DOM中第一个符合规则的.dropdown-menu元素，所以点击第二个按钮也会弹出第一个菜单。

Bootstrap下拉菜单的关联监听键 #

Bootstrap下拉菜单的核心绑定属性有两个：

• 触发元素上的data-target属性：值为对应下拉菜单的ID选择器，用于指定点击后要展开的菜单元素
• 也可以用href属性代替data-target（如果触发元素是a标签的话），值同样为对应菜单的ID选择器，此时需要保留role="button"保证语义正确
• 触发元素必须带有data-toggle="dropdown"属性，用于告知Bootstrap该元素是下拉触发按钮

修复方案（设置唯一ID绑定） #

你可以给每个下拉菜单设置唯一ID，再给对应的触发按钮指定data-target绑定，同时给每个下拉组包裹.dropdown父容器，加d-inline-block类保证两个菜单在同一行展示，修改后代码如下：

<!-- 第一个下拉组 -->
<div class="dropdown d-inline-block">
  <a class="nav-link dropdown-toggle" 
     href="<?php echo $baseurl;?>verification" 
     data-toggle="dropdown" 
     role="button"
     data-target="#verificationDropdown"
     aria-haspopup="true"
     aria-expanded="false">
    Verification
  </a>
  <ul id="verificationDropdown" class="dropdown-menu" style="background-color: #000080;">
    <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/certificates">Verify Certificates</a></li>
    <li class="nav-item"><a class="nav-link" href="<?php echo $baseurl;?>verification/membership">Verify Membership</a></li>
  </ul>
</div>

<!-- 第二个下拉组 -->
<div class="dropdown d-inline-block">
  <a class="nav-link2 dropdown-toggle" 
     href="<?php echo $baseurl;?>opportunities" 
     data-toggle="dropdown" 
     role="button"
     data-target="#opportunitiesDropdown"
     aria-haspopup="true"
     aria-expanded="false">
    Opportunities
  </a>
  <ul id="opportunitiesDropdown" class="dropdown-menu" style="background-color: #000080;">
    <li class="nav-item"><a class="nav-link2" href="http://robotics.uiu.ac.bd/form/wanted_graphicdesigner">Graphic Designer Wanted</a></li>
  </ul>
</div>

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