Bootstrap同一nav类下实现多下拉菜单的技术咨询

当然可以在同一个<nav>里实现多个独立的下拉菜单，完全不用把每个菜单项塞进单独的div里——你遇到的问题核心是下拉触发器和对应的菜单没有正确关联，再加上一些重复属性导致的逻辑冲突。

先拆解下你代码里的几个问题：

• 两个下拉菜单的aria-labelledby都用了同一个值dropdown，这会让Bootstrap的JS和辅助设备混淆关联关系，自然会触发同一个菜单
• 第二个触发器用了data-target="#dropdown2"，但在你用的Bootstrap 4版本里，下拉组件默认是通过触发器的id和菜单的aria-labelledby关联，或者直接找触发器后面紧邻的兄弟元素；这个属性反而可能干扰默认逻辑

下面是修正后的代码，我标注了关键修改点：

<nav>
  <a>Menu item 1</a>
  <a>Menu item 2</a>
  <!-- 第一个下拉触发器：设置唯一id -->
  <a class="dropdown dropdown-toggle" href="#" id="dropdown1-trigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
  <!-- 第一个下拉菜单：aria-labelledby匹配触发器的id -->
  <div class="dropdown-menu" aria-labelledby="dropdown1-trigger">
    <a class="dropdown-item" href="/">dropdown item 1</a>
  </div>
  <!-- 第二个下拉触发器：设置唯一id，去掉了测试用的display:none（需要的话可以再加） -->
  <a class="dropdown dropdown-toggle" href="#" id="dropdown2-trigger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
  <!-- 第二个下拉菜单：aria-labelledby匹配触发器的id -->
  <div class="dropdown-menu" aria-labelledby="dropdown2-trigger" id="dropdown2">
    <a class="dropdown-item" href="/">dropdown item 1</a>
  </div>
</nav>

关键修改说明： #

1. 给每个下拉触发器分配唯一的id（比如dropdown1-trigger、dropdown2-trigger），这是关联的核心标识
2. 对应的下拉菜单的aria-labelledby属性必须和触发器的id完全匹配，Bootstrap的JS会通过这个属性精准找到对应的菜单
3. 不需要额外加data-target（除非你要把菜单放在触发器非紧邻的位置），默认逻辑已经能正确识别关联关系

如果你的项目用的是Bootstrap 5，记得把data-toggle改成data-bs-toggle，其他关联逻辑保持一致：

<nav>
  <a>Menu item 1</a>
  <a>Menu item 2</a>
  <a class="dropdown dropdown-toggle" href="#" id="dropdown1-trigger" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3(dropdown menu 1)</a>
  <div class="dropdown-menu" aria-labelledby="dropdown1-trigger">
    <a class="dropdown-item" href="/">dropdown item 1</a>
  </div>
  <a class="dropdown dropdown-toggle" href="#" id="dropdown2-trigger" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu item 3 ( dropdown menu 2)</a>
  <div class="dropdown-menu" aria-labelledby="dropdown2-trigger" id="dropdown2">
    <a class="dropdown-item" href="/">dropdown item 1</a>
  </div>
</nav>

这样修改后，两个下拉菜单就能独立触发，而且完全不用改变原有布局结构。

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