Bootstrap 4+ 原生支持 data-hover="dropdown"，但需配合正确结构（div.dropdown 包裹、同时含 data-toggle 和 data-hover）、避免 a 标签作触发器，并自动降级移动端至点击交互。
data-hover="dropdown" 是最简方案，但必须配对 Bootstrap 4+ 结构
bootstrap 4 及以上原生支持 data-hover="dropdown"，不用额外插件——前提是你的 html 结构符合官方规范。很多人加了属性却没效果，根本原因是用了旧版（v3）的 <li class="dropdown"> 写法，而 v4 要求用 <div class="dropdown"> 包裹触发器和菜单。
<p>正确结构示例：</p>
<pre class="brush:php;toolbar:false;"><div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown">
账户
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">我的账户</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">退出</a>
</div>
</div></pre>
<ul>
<li>
<code>data-toggle="dropdown" 和 data-hover="dropdown" 必须同时存在，缺一不可
<a></a> 标签（除非加 role="button" 和 tabindex="0"），否则移动端点击失效用 bootstrap-hover-dropdown 插件时，引入顺序和初始化时机最关键
如果你用的是第三方插件 bootstrap-hover-dropdown（常见于仍用 Bootstrap 3 的老项目），它不兼容 v4/v5 的 JS 模块机制，且严重依赖加载顺序和 DOM 就绪时机。
典型失败场景：菜单悬停无反应，或鼠标一移开就立刻收起——基本都是因为 bootstrap-hover-dropdown.min.js 在 bootstrap.min.js 前加载，或初始化代码写在 $(document).ready() 外面。
- 确保脚本按此顺序加载：
jquery.min.js→bootstrap.min.js→bootstrap-hover-dropdown.min.js - JavaScript 初始化必须写在
$(document).ready()内，且推荐用选择器绑定到.dropdown-toggle，而非泛用.dropdown - 如果页面有动态插入的下拉菜单（如 AJAX 加载），需手动调用
$('.dropdown-toggle').dropdownHover()重绑定
delay 配置不是越长越好，500ms 是多数场景的平衡点
插件提供 delay 参数控制关闭延迟，默认 500ms。设太短（如 100ms），用户从触发器移到菜单时容易断连；设太长（如 1500ms），多个菜单会堆叠遮挡，尤其在窄屏导航栏里。
真实体验建议：
- 主导航一级菜单：用默认
delay: 500，兼顾响应与容错 - 二级嵌套下拉（dropdown-submenu）：可微调至
delay: 300，避免悬停路径过长导致误触 - 含表单控件（如搜索框、日期选择）的下拉：务必设
instantlyCloseOthers: false，否则用户点输入框瞬间菜单就收了
移动端自动降级是特性，别强行“修复”
所有靠谱的 hover 下拉方案（包括原生 v4+ 和 bootstrap-hover-dropdown）都会用 'ontouchstart' in document.documentElement 或 matchMedia('(hover: hover)') 检测触摸设备，并自动切回 click 触发。这是 WCAG 合规和 iOS/Android 行为一致性的必需设计。
如果你看到“手机上悬停无效”，这不是 bug，是预期行为。强行用 hoverDelay: 0 + delay: 0 强推 hover 到移动端，会导致：
- iOS Safari 点击穿透（点第一次没反应，第二次才触发）
- Android Chrome 长按误识别为“复制文本”
- 屏幕阅读器用户完全无法操作菜单
真要统一交互逻辑，该重构为点击展开 + 键盘焦点支持，而不是硬塞 hover 到手指端。
