data-toggle="collapse"菜单点击后消失，点击下拉项即关闭，求问题排查

嘿，我注意到你提到用了data-toggle="collapse"来实现菜单，但给出的代码里触发器写的是data-toggle="dropdown"——这大概率是你混淆了Bootstrap的两种组件：折叠面板（Collapse）和下拉菜单（Dropdown），这很可能就是菜单乱消失的根源！

核心问题分析 #

Bootstrap的Dropdown组件本来的逻辑是：点击触发器展开菜单，再次点击触发器或页面其他区域才会收起。但如果属性用错、无障碍标识不匹配，甚至脚本冲突，都会导致点击下拉菜单内部也触发收起动作。

从你给的代码片段看，还有两个小细节可能出问题：

• 下拉菜单的aria-labelledby写的是navbarDropdown，但触发器的ID是navbarDropdown1，两者不匹配，不仅影响无障碍访问，还可能干扰组件的正常交互逻辑。
• 如果页面里同时引入了多个版本的Bootstrap JS或者jQuery冲突，也会让组件行为“抽风”。

一步步解决问题 #

1. 先把组件属性用对！

如果你要做的是下拉菜单，严格按照Bootstrap的Dropdown规范来写：

• 触发器的data-toggle必须是dropdown，绝对不能写成collapse（那是给折叠面板用的）
• 确保aria-labelledby的值和触发器的ID完全一致
• 下拉菜单容器要有dropdown-menu类，而且和触发器同属一个带dropdown类的父元素（你的代码里父li已经加了dropdown，这部分是对的）

修正后的正确结构参考：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle bg-dark" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    My Account
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
    <!-- 这里放你的下拉选项 -->
    <a class="dropdown-item" href="#">Profile</a>
    <a class="dropdown-item" href="#">Settings</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Logout</a>
  </div>
</li>

2. 阻止事件冒泡（如果是自定义脚本搞的鬼）

如果你确实需要混用组件，或者自己加了点击事件监听，那可能是事件冒泡导致点击下拉项时触发了收起动作。这种情况下，给下拉菜单加个阻止冒泡的脚本就行：

$('.dropdown-menu').on('click', function(e) {
  e.stopPropagation();
});

这段代码会让点击下拉菜单内部时，事件不会往上传到触发器或者页面其他监听元素，自然就不会意外收起菜单了。

3. 检查依赖是否正确

最后确认一下页面的依赖引入：

• Bootstrap 4及以下版本必须先引入jQuery，再引入Bootstrap的JS文件
• 不要重复引入多个版本的Bootstrap或jQuery，版本冲突会让组件行为异常

总结 #

最可能的原因就是你把Dropdown的data-toggle属性写成了Collapse的collapse，导致组件逻辑混乱。先改这个属性，再把ID和无障碍标识匹配好，应该就能解决菜单一点击就消失的问题啦！

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