Bootstrap 5 必须使用 data-bs-toggle="dropdown"，混用 data-toggle="dropdown" 将导致下拉菜单完全不响应；同时需确保 Popper 正确加载、HTML 结构规范、navbar-collapse 的 id 与 data-target 严格匹配。
data-toggle="dropdown" 和 data-bs-toggle="dropdown" 混用导致失效
bootstrap 5 彻底移除了 data-toggle，全部改用 data-bs-toggle。如果你在 bootstrap 5 项目里还写 data-toggle="dropdown"，javascript 就不会绑定事件，点击自然没反应。
常见错误现象：按钮显示正常，但点击后下拉菜单不展开，控制台无报错，也查不到 dropdown 相关初始化日志。
- 检查你引入的 Bootstrap 版本（
bootstrap.min.js文件名或注释中通常含版本号） - Bootstrap 4 及更早：用
data-toggle="dropdown" - Bootstrap 5+：必须用
data-bs-toggle="dropdown"，否则整个 dropdown 组件逻辑不触发 - 别混着写——哪怕只有一处写错，都可能导致父级
dropdown容器无法激活
navbar-collapse 的 id 与 navbar-toggler 的 data-target 不匹配
移动端下拉菜单失效，十次有七次是这个原因。它不直接报错，但会让整个折叠区域“失联”，二级菜单连带失去上下文，点不动。
典型错误代码：
<button class="navbar-toggler" data-toggle="collapse" data-target="#nav-collapse"></button> <div class="collapse navbar-collapse" id="navbarNav"></div>
这里 data-target="#nav-collapse" 和 id="navbarNav" 完全对不上，Bootstrap 找不到目标容器，后续所有子菜单（包括二级 dropdown）都得不到渲染环境。
- 确保
data-target值（含#）与对应navbar-collapse的id完全一致，大小写、连字符、空格都不能差 - 如果用了多个导航栏，每个
navbar-collapse必须有唯一id，不能复用 - 不要依赖 class 名做定位——Bootstrap 的 collapse 逻辑只认
id+data-target
二级菜单（dropdown-submenu）未被 Bootstrap 原生支持
Bootstrap 官方从 v3.0 起就明确废弃了 dropdown-submenu，它不是内置组件，也没有 JS 行为支持。你看到的“二级菜单”实际是靠 CSS + :hover 或手动 JS 模拟的，和一级 dropdown 的 JS 初始化完全无关。
所以当一级菜单能展开、二级点不动时，不是 JS 错了，而是压根没 JS 管它。
- 若依赖 hover 展开：移动端没有 hover，必须补 JS 监听 click 并切换
.show类 - 若想兼容移动端，需手动给二级触发项加
data-bs-toggle="dropdown"，并确保其父级有dropdown-menu容器包裹 - 别指望
dropdown-submenu类名自带功能——它只是个命名习惯，CSS 需自己写（比如.dropdown-submenu .dropdown-menu定位） - 第三方插件（如 bootstrap-submenu）大多已停止维护，且与 Bootstrap 5 不兼容，慎用
jQuery / Popper 加载顺序或缺失引发连锁失效
Bootstrap 5 不再依赖 jQuery，但如果你混用了旧版 JS 插件、自定义脚本或某些主题模板，仍可能隐式依赖 jQuery。而 Popper 是 dropdown 的定位核心，缺了它菜单会出现在左上角或根本不出现在可视区。
错误现象：下拉菜单闪一下就消失、位置偏移到屏幕外、点击后只有背景遮罩（dropdown-backdrop）出现。
- Bootstrap 5：确保加载了
popper.min.js（或使用bootstrap.bundle.min.js，它已内置 Popper） - Bootstrap 4：必须按顺序加载
jquery.min.js→popper.min.js→bootstrap.min.js - 检查浏览器开发者工具的 Network 面板，确认这三个文件状态码都是 200，没 404
- 用
console.log(typeof bootstrap)和console.log(typeof Popper)快速验证全局对象是否存在
二级菜单跳转问题最麻烦的地方在于：它常常是多个小错误叠加的结果——比如 data-bs-toggle 写对了，但 data-target 错了；或者 Popper 加载了，但二级菜单的 HTML 结构漏了 dropdown-menu 包裹层。调试时得一层层剥开，不能只盯着“点不动”这一个表象。
