如何实现鼠标悬停时导航栏内按钮下拉菜单自动展开

在校完成课程项目时，需要实现导航栏下拉菜单鼠标悬停自动展开的效果。尝试多种方案后效果始终不符合预期：要么下拉按钮仅支持点击触发，要么所有选项直接上下平铺排列，无法实现正常的下拉收起交互，现有代码结构如下：

<li class="nav-item">
  <div class="dropdown" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Category</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Login</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</li>

你当前用的是Bootstrap原生下拉组件，默认仅绑定点击触发事件，直接硬改样式很容易出现选项平铺、无法收起的问题，按下面步骤修改就能实现正常的悬停展开/收起交互：

核心实现代码 #

1. 新增CSS样式（必加） #

把以下样式放到全局CSS文件中，仅在桌面端启用悬停触发逻辑，避免移动端交互异常：

/* 仅桌面端生效悬停触发，适配Bootstrap默认响应式断点 */
@media (min-width: 992px) {
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
  /* 消除触发项和下拉菜单的间隙，防止鼠标移动过程中菜单意外收起 */
  .dropdown-menu {
    margin-top: 0;
    /* 可选：加0.2s淡入动画，交互更自然 */
    transition: opacity 0.2s ease;
  }
}

2. 新增JS逻辑（可选，推荐添加） #

以下JS用来同步组件的无障碍状态，避免属性值和实际展示状态不匹配：

const dropdownItems = document.querySelectorAll('.nav-item.dropdown');
dropdownItems.forEach(dropdown => {
  const toggleBtn = dropdown.querySelector('.dropdown-toggle');
  const menu = dropdown.querySelector('.dropdown-menu');

  dropdown.addEventListener('mouseenter', () => {
    if (window.innerWidth >= 992) {
      toggleBtn.setAttribute('aria-expanded', 'true');
      menu.classList.add('show');
    }
  });

  dropdown.addEventListener('mouseleave', () => {
    if (window.innerWidth >= 992) {
      toggleBtn.setAttribute('aria-expanded', 'false');
      menu.classList.remove('show');
    }
  });
});

避坑说明 #

• 不要删除原有data-toggle="dropdown"属性，否则移动端点击触发的逻辑会完全失效
• 不要直接给.dropdown-menu加全局display: block样式，这就是你遇到的「所有选项上下平铺、无法收起」问题的根源
• 如果项目只需要适配桌面端，可以完全不用写上面的JS，仅添加CSS就能实现效果

常见异常排查 #

• 鼠标从导航项移到下拉菜单时菜单自动收起：检查.dropdown-menu的margin-top值，改成0即可，消除触发元素和菜单之间的空白间隙
• 移动端菜单默认展开：确认悬停相关的CSS都写在min-width: 992px的媒体查询范围内，不要全局生效
• 点击导航项后菜单无法收起：检查是否有其他全局CSS给下拉项加了强制显示的样式，优先级覆盖了默认的隐藏逻辑

内容的提问来源于stack exchange，提问作者Senschey