必须用bootstrap.bundle.min.js，因其内置Popper；若误用bootstrap.min.js或CDN链接被截断、data-bs-toggle写错、jQuery混入、navbar-collapse的id不匹配，均会导致下拉菜单失活。
检查 bootstrap.bundle.min.js 是否正确引入
Bootstrap 5 的下拉菜单依赖内置的 Popper.js，而 bootstrap.min.js 不含 Popper，单独引入它会导致 dropdown 完全失活。必须用 bootstrap.bundle.min.js（或自己手动拼接 Popper + Bootstrap JS）。
常见错误包括：
- CDN 链接被编辑器自动换行截断，比如
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js在 HTML 中因空格或回车断成两行，浏览器只加载前半段 - 用了
bootstrap.min.js却没配 Popper，控制台无报错但交互静默 - 资源加载失败却没察觉：打开浏览器 Network 面板，过滤
bootstrap，确认 JS 文件状态码是200
验证 data-bs-toggle="dropdown" 属性是否写对
Bootstrap 5 已弃用 data-toggle，统一改为 data-bs-toggle。如果仍写 data-toggle="dropdown"，JS 初始化时会忽略该元素，点击自然无响应。
正确写法示例：
<button class="btn btn-secondary" type="button" data-bs-toggle="dropdown"> 下拉菜单 </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">选项1</a></li> </ul>
注意点：
-
data-bs-toggle必须和.dropdown-menu在同一个.dropdown父容器内 - 触发元素不能是
<a>且href="#"未阻止默认跳转（建议加role="button"或用<button>） - 动态插入的下拉菜单需手动初始化：
new bootstrap.Dropdown(element)
排查 jQuery 是否误混入 Bootstrap 5 项目
Bootstrap 5 不依赖 jQuery；如果页面同时引入了 jQuery 和 bootstrap.bundle.min.js，且 jQuery 在后者之后加载，不会直接报错，但可能干扰事件委托或覆盖原生方法，尤其在复杂 DOM 操作后出现偶发失效。
判断方式：
- 打开控制台执行
typeof bootstrap，应返回"object"；若返回"undefined"，说明 JS 根本没加载成功 - 执行
typeof $，若为"function"且你没主动用 jQuery 写交互逻辑，大概率是冗余引入 - 移除所有 jQuery 引用后重试——很多“点击没反应”问题就此消失
移动端导航栏里下拉菜单失效，先核对 navbar-collapse 的 id 匹配
这不是下拉菜单本身的问题，而是整个导航折叠结构卡住了。当 navbar-toggler 的 data-bs-target 指向一个不存在的 id，整个 .dropdown 子项都会失去上下文，无法触发。
典型错误写法：
<button data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar"></button> <div class="collapse navbar-collapse" id="navbarSupportedContent"></div>
这里 data-bs-target 和 id 值不一致，导致下拉菜单所在的父容器从未展开，点击当然无效。
务必确保：
-
data-bs-target值（带#）与目标div的id完全一致，大小写、连字符都不能错 -
.dropdown元素必须放在.navbar-collapse内部，不能在外部“悬空” - 不要给
.navbar-collapse加style="display: none"类或内联样式，会阻断 Bootstrap 的显示逻辑
id，或一行被截断的 CDN URL——它们不会报错，只会让一切静默失效。 
