Bootstrap框架中下拉菜单Hover触发的实现代码-Bootstrap教程-PHP中文网

bootstrap 5 默认禁用 dropdown-menu 的 hover 触发，仅支持 click/focus；需通过 css（配合 @media 适配移动端）或 js（注意 touchstart 冲突与 popper 集成）手动实现，同时须处理 safari 闪退、定位错乱及 overflow 截断等边界问题。

bootstrap框架中下拉菜单hover触发的实现代码

Bootstrap 5 默认不支持 `dropdown-menu` 的 hover 触发

Bootstrap 5 移除了对 :hover 触发下拉菜单的原生支持，只保留点击（click）和焦点（focus）两种方式。这不是 bug，是设计取舍——为移动端兼容性让路。如果你在桌面端需要 hover 展开，必须手动干预 CSS 或 JS。

用纯 CSS 实现 hover 需要覆盖 `.dropdown` 的 `:focus-within` 行为

Bootstrap 5 的下拉依赖 :focus-within 模拟“悬停感”，但该伪类在鼠标移入时不会自动激活。直接加 :hover .dropdown-menu 会失效，因为 .dropdown-menu 默认 display: none，且父级 .dropdown 没有触发状态。

给 .dropdown 添加 position: relative（确保子菜单定位正常）

用 .dropdown:hover .dropdown-menu 强制显示，同时补上过渡动画避免突兀：

.dropdown:hover .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

必须重置 .dropdown-menu 的 opacity 和 transform 初始值，否则动画无效：

.dropdown-menu {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s, transform 0.2s;
}

移动端需禁用 hover：用 @media (hover: hover) and (pointer: fine) 包裹上述规则，避免触屏设备误触发

JS 方案更可靠，但要注意 `touchstart` 冲突

纯 CSS 在某些浏览器或嵌套结构中可能失灵，JS 是兜底选择。核心是监听 mouseenter/mouseleave，并手动 toggle show 类。

VPS Bootstrap

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

下载

不要直接操作 display，而是 toggle Bootstrap 的 show 类：

document.querySelectorAll('.dropdown').forEach(dropdown => {
  dropdown.addEventListener('mouseenter', () => {
    dropdown.classList.add('show');
  });
  dropdown.addEventListener('mouseleave', () => {
    dropdown.classList.remove('show');
  });
});

必须阻止 touchstart 事件穿透，否则 iOS 上第一次触摸会触发 hover，第二次才真正点击 —— 加 if ('ontouchstart' in window) return; 判断
如果页面用了 Popper.js（Bootstrap 5 默认），需调用 bootstrap.Dropdown.getInstance(el).toggle() 而非硬切类，否则定位错乱