Bootstrap下拉菜单悬停显示的实现方案-Bootstrap教程-PHP中文网

bootstrap 5 默认禁用 hover 触发下拉菜单，仅支持 click；需通过 data-bs-trigger="hover" 配合自定义 js 实现 mouseenter/mouseleave 控制，并用 matchmedia 检测设备悬停能力以适配移动端。

bootstrap下拉菜单悬停显示的实现方案

Bootstrap 5 默认不支持 `hover` 触发下拉菜单

Bootstrap 5 移除了对 :hover 的原生支持，所有下拉菜单（Dropdown）默认只响应点击（click），这是故意为之的设计变更。如果你在升级后发现鼠标悬停没反应，不是代码写错了，是框架本身就不干这事。

常见错误现象：dropdown-menu 在悬停时一闪而过、无法保持展开、或完全无响应；控制台没有报错，但行为和 Bootstrap 4 不一致。

使用场景：导航栏顶部二级菜单、工具栏内嵌操作组，用户期望“指哪开哪”，而非必须点一下再点一下
根本原因：Bootstrap 5 的 Dropdown JavaScript 插件默认禁用 trigger: 'hover'，且 CSS 中也移除了 .dropdown:hover .dropdown-menu 这类样式规则
兼容性影响：强行加 CSS 悬停样式在移动端会引发意外展开（触摸设备无真正 hover），必须配合设备检测或媒体查询

用 `data-bs-trigger="hover"` + 自定义 JS 补齐行为

Bootstrap 官方文档其实留了口子：虽然不默认启用，但允许通过 data-bs-trigger 属性声明触发方式。不过仅设这个属性还不够——它只影响 JS 初始化逻辑，CSS 层仍需手动补全可见性控制。

实操建议分两步走：

在触发元素上添加 data-bs-trigger="hover" 和 data-bs-delay='{"show":100,"hide":200}'（防误触）
必须写一段轻量 JS，在 mouseenter / mouseleave 时显式调用 show() / hide() 方法，因为 Bootstrap 5 的 hover 支持是“半实现”的
避免直接用纯 CSS 模拟（比如 .dropdown:hover .dropdown-menu { display: block; }），否则会绕过 Bootstrap 的隐藏逻辑，导致键盘导航、焦点管理、A11Y 属性（如 aria-expanded）全部失效

示例片段：

<div class="dropdown">
  <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-delay='{"show":100,"hide":200}'>
    菜单
  </a>
  <ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">选项1</a></li>
  </ul>
</div>

对应 JS（需在 DOM 加载后执行）：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

document.querySelectorAll('.dropdown').forEach(dropdown => {
  const trigger = dropdown.querySelector('[data-bs-toggle="dropdown"]');
  const bsDropdown = new bootstrap.Dropdown(dropdown);
  
  trigger.addEventListener('mouseenter', () => bsDropdown.show());
  trigger.addEventListener('mouseleave', () => {
    setTimeout(() => {
      if (!dropdown.matches(':hover')) bsDropdown.hide();
    }, 200);
  });
});

移动端适配必须关掉 `hover` 行为

悬停菜单在手机上基本不可用：手指划过会误触发、长按可能弹出系统菜单、返回键逻辑混乱。不处理这点，上线后用户反馈第一句就是“点不开”。

判断依据不能只靠 screen.width，得用更可靠的方案：

用 matchMedia('(hover: hover)') 检测设备是否支持悬停（现代浏览器支持良好）
或者监听 touchstart 事件，一旦触发就全局禁用所有下拉菜单的 hover 逻辑（更稳妥）
千万别用 if (navigator.userAgent.includes('Mobile'))，既不准又难维护

推荐做法：初始化时检查 matchMedia('(hover: hover)').matches，为 false 就跳过绑定 mouseenter/mouseleave，只保留 click 行为。

第三方插件 `bootstrap-hover-dropdown` 已不兼容 Bootstrap 5

很多老项目还在用 bootstrap-hover-dropdown 这类 jQuery 时代的插件，它们依赖 Bootstrap 4 的构造函数签名和内部方法（比如 $().dropdown('toggle')），在 Bootstrap 5 下会直接报 Uncaught TypeError: Cannot read properties of undefined 或静默失败。

替代思路很明确：