移动端下拉菜单点不动主因是.dropdown-backdrop遮挡、data-bs-toggle未正确识别或事件干扰；应检查backdrop层级、确保属性准确、手动初始化动态菜单，并优先用classList.toggle('show')替代默认交互。
移动端下拉菜单点不动，大概率不是 JS 没加载，而是被遮挡、触发失效或事件被拦截了。直接改 z-index 或调大断点值往往治标不治本。
为什么点击没反应？先看是否被 .dropdown-backdrop 挡住
Bootstrap 在移动端展开下拉时会自动插入一个全屏的 <div class="dropdown-backdrop">，默认 position: fixed。某些安卓 WebView 或 iOS Safari 会把它渲染在菜单上方，导致后续点击穿透失败——你看似点了菜单项，实际点的是 backdrop。
- 用浏览器开发者工具检查：展开菜单后搜索
dropdown-backdrop，看它是否覆盖在.dropdown-menu上方 - 临时修复：加一行 CSS 即可
.dropdown-backdrop { position: static !important; } - 别用
display: none隐藏它，否则部分版本 Bootstrap 会因 backdrop 缺失而拒绝关闭菜单
data-bs-toggle="dropdown" 在移动端是否真被识别？
Bootstrap 5+ 要求严格匹配属性名，写成 data-toggle 或漏掉 data-bs-toggle 都会导致实例未初始化，Dropdown.getInstance() 返回 null，控制台报 Cannot read properties of null (reading 'toggle')。
- 确认 HTML 中触发元素有且仅有：
data-bs-toggle="dropdown"+data-bs-target（可选）或href="#id"指向菜单 - 检查 DOM 加载时机：如果菜单是动态插入（如通过 Alpine、Turbo 或 AJAX），需手动初始化：
new bootstrap.Dropdown(element)
- 避免在
<script>标签内直接执行初始化，除非确保 DOM 已就绪（推荐用DOMContentLoaded或$(document).ready()）
响应式断点改大就能解决？小心副作用
有人把 $navbar-breakpoint 从 lg 改成 xl，让导航栏在更宽屏幕下仍保持折叠态，以为能“统一移动端逻辑”。但这是错觉：
立即学习“前端免费学习笔记（深入）”；
- 断点只影响
.navbar-collapse的折叠/展开，不影响.dropdown组件自身的触控逻辑 - 强行扩大断点会让桌面用户也看到汉堡菜单，破坏原本的 hover 展开体验
- 真正要调的是交互方式：移动端应禁用 hover、强制 click 触发，而不是靠断点“伪装”成移动态
最稳的解法：绕过 Bootstrap 默认事件，手控 show 类
当所有配置都对、JS 已加载、backdrop 已修复，但依然偶发点不动（尤其 iOS Safari），说明浏览器的 touch/click 事件冒泡或延迟干扰了 Bootstrap 内部状态同步。
- 移除触发元素上的
data-bs-toggle，改用原生click监听 - 必须调用
e.preventDefault()，否则部分 WebView 会触发两次 - 用
classList.toggle('show')直接控制显隐，不依赖 Bootstrap 实例 - 示例（每个下拉独立控制）：
document.querySelectorAll('[data-dropdown-btn]').forEach(btn => { const menu = document.querySelector(btn.dataset.target); btn.addEventListener('click', e => { e.preventDefault(); menu.classList.toggle('show'); }); });
注意：多个下拉共用同一份 JS 逻辑时，别用 querySelector('.dropdown-menu') 这种全局选择器，容易误操作其他菜单；务必通过 dataset 或层级关系精准定位对应菜单。
