移动端点击两次才展开下拉菜单是因浏览器将首次触摸模拟为 hover，第二次才触发 click；应移除 data-bs-toggle，用 js 监听 click 并调用 preventdefault() 和 classlist.toggle('show')。
移动端点击两次才展开下拉菜单？这是 hover 与 click 的冲突
Bootstrap 的 .dropdown 默认依赖 :hover 触发（尤其在桌面端），但移动端没有真正的 hover 状态。浏览器会把第一次触摸当作“模拟 hover”，第二次才触发 click —— 所以你点第一下菜单没反应，第二下才弹出来。
这问题常见于 Bootstrap 4/5 的原生下拉，尤其在 iOS Safari 和部分安卓 WebView 中更明显。
- 不是 Bug，是浏览器对触摸事件的兼容性处理机制
- 根本原因：
data-bs-toggle="dropdown"绑定的事件监听器，在移动端被触发了两次（touchstart→mouseenter→click） - 如果你用的是 Bootstrap 5.3+，默认已启用
data-bs-trigger="click"，但仍可能因父元素干扰失效
怎么强制只响应一次点击？改触发方式 + 阻止默认行为
最直接的办法是绕过 Bootstrap 的默认事件链，手动控制展开逻辑：
- 在
<button></button>上移除data-bs-toggle，改用 JS 监听click - 调用
Dropdown.getInstance()或直接操作classList - 必须加
event.preventDefault()，否则某些 WebView 会触发两次
const dropdownBtn = document.querySelector('[data-dropdown-btn]');
const dropdownMenu = document.querySelector('.dropdown-menu');
<p>dropdownBtn.addEventListener('click', function (e) {
e.preventDefault();
dropdownMenu.classList.toggle('show');
});</p>
注意：如果页面有多个下拉，别用 querySelectorAll 后统一绑事件，容易互相干扰；每个按钮应独立控制对应菜单。
为什么加 data-bs-trigger="click" 还不管用？
这个属性只在初始化时生效，如果你动态插入 DOM 或手动调用 new Dropdown()，它可能没被读取到：
- 检查是否漏写了
data-bs-toggle="dropdown"—— 即使设了trigger，也得有 toggle 才能初始化实例 - 初始化时机不对：DOM 加载完再 new，别在
<script></script>标签里直接写（尤其是放在） - 第三方库（如 Turbolinks、Alpine）可能劫持了事件，导致 Bootstrap 实例未正确绑定
常见错误现象：Uncaught TypeError: Cannot read properties of null (reading 'toggle')，说明 getInstance() 返回了 null，大概率是元素没找到或实例未初始化。
要不要用 data-bs-auto-close="outside"？
这个配置只影响「关闭行为」，不影响「首次展开」，所以对点击两次问题无解：
- 它控制的是点击菜单外部时是否自动收起
- 如果你同时用了
data-bs-auto-close="false"，反而会让菜单卡住不收，加重体验问题 - 移动端建议保持默认值（
outside），别为了修展开问题去动关闭逻辑
真正要盯住的是初始化方式和事件绑定顺序。很多项目在 SPA 中反复挂载组件，却没销毁旧的 Dropdown 实例，导致事件叠加、状态错乱 —— 这比“点两次”更难排查。
