Bootstrap 5下拉菜单切换异常：点击分类触发首个子菜单

问题核心是子菜单id重复或data-bs-target指向错误，导致所有触发按钮都绑定到同一个子菜单实例。以下是具体修复步骤：

1. 确保子菜单id唯一 #

每个.dropdown-menu必须拥有独一无二的id，绝对不能多个子菜单共用同一个id。

2. 触发按钮与子菜单正确绑定 #

每个触发按钮的data-bs-target要精准对应目标子菜单的id，同时保持data-bs-toggle="dropdown"属性不变。

正确示例代码 #

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <!-- 第一个带dropend的下拉菜单 -->
        <li class="nav-item dropdown dropend">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            分类1
          </a>
          <ul class="dropdown-menu" id="category1-dropdown">
            <li><a class="dropdown-item" href="#">子项1-1</a></li>
            <li><a class="dropdown-item" href="#">子项1-2</a></li>
          </ul>
        </li>
        <!-- 第二个带dropend的下拉菜单 -->
        <li class="nav-item dropdown dropend">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            分类2
          </a>
          <ul class="dropdown-menu" id="category2-dropdown">
            <li><a class="dropdown-item" href="#">子项2-1</a></li>
            <li><a class="dropdown-item" href="#">子项2-2</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

常见错误排查 #

• 错误：多个子菜单使用相同id（比如都用dropdownMenu），导致所有按钮都触发第一个匹配的子菜单。
• 错误：data-bs-target未指向对应子菜单的id，或者存在拼写错误。
• 错误：未给父li元素添加dropend类，虽不影响触发逻辑，但会导致子菜单位置显示异常，建议按规范添加。

npm安装Bootstrap的验证 #

确保你已正确引入Bootstrap的CSS和JS模块：

// 引入Bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css';
// 引入包含下拉交互的Bootstrap JS
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

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