Bootstrap 5使用collapse实现下拉菜单按键触发报错如何解决

核心原因 #

该报错是Bootstrap 5 dropdown组件与collapse组件的事件逻辑冲突导致的。你给导航项加了dropdown、dropdown-toggle等类时，Bootstrap会自动为该元素初始化dropdown实例，绑定默认键盘事件（处理Esc、方向键、空格等按键），但你实际用的是collapse组件实现下拉逻辑，没有遵循dropdown的标准DOM结构，导致dropdown的键盘事件处理函数找不到预期的DOM节点，触发undefined报错。
不同版本报错不一致是因为Bootstrap 5.0.x和5.1.x分别调整了焦点管理、节点遍历的相关代码，而Bootstrap 4的dropdown初始化逻辑和键盘事件处理规则与5.x不同，不会对非标准结构的DOM触发报错。

修复步骤 #

• 移除所有dropdown专属的类与属性，避免Bootstrap自动初始化dropdown实例，仅保留collapse相关的触发配置
• 补充少量自定义CSS，保证下拉菜单的显示逻辑和动画正常
• 按需自定义键盘事件处理逻辑，不会再和默认事件冲突

修复后的完整代码示例 #

HTML代码 #

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav-menu" aria-controls="nav-menu" aria-expanded="false" aria-label="Menu control">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-collapse collapse" id="nav-menu">
    <ul class="navbar-nav">
      <li class="nav-item position-relative">
        <a class="nav-link" href="#" id="dropdown-anchor" role="button" data-bs-toggle="collapse" data-bs-target="#dropdown" aria-expanded="false">
          Foo
        </a>
        <!-- 可直接加dropdown-menu类复用原生样式，无需额外写CSS -->
        <div class="dropdown-menu collapse" id="dropdown" aria-labelledby="dropdown-anchor">
          <a class="dropdown-item" href="#">Foo</a>
          <a class="dropdown-item" href="#">Bar</a>
          <a class="dropdown-item" href="#">Foobar</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

可选补充CSS（如果没有加dropdown-menu类时补充） #

#dropdown.collapse:not(.show) {
  display: none;
}
#dropdown.collapse.show {
  display: block;
}

补充说明 #

如果你想保留dropdown、dropdown-toggle类的原生样式不想修改结构，也可以给父导航项加上data-bs-disable="dropdown"属性，主动阻止Bootstrap自动初始化dropdown实例，同样可以解决冲突。

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