Bootstrap导航栏：如何实现鼠标悬停时展开菜单？

嘿，刚好我对Bootstrap 4的导航栏玩法熟得很，这就教你怎么把默认点击触发的下拉菜单改成鼠标悬停展开～

首先得明确：我们只需要在大屏设备上实现悬停展开（毕竟移动端没鼠标悬停这回事），小屏还是保留原生的汉堡按钮点击逻辑，这样体验才合理。

方法一：纯CSS实现（推荐，轻量无依赖） #

这种方法只需要加几行CSS，完全不需要JS，是最省心的方案：

/* 仅在大屏设备（对应navbar-expand-lg的断点992px及以上）生效 */
@media (min-width: 992px) {
  /* 默认隐藏下拉菜单，设置过渡动画让展开更丝滑 */
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    position: absolute;
    top: 100%;
    left: 0;
  }
  
  /* 鼠标悬停在父级.dropdown时，显示下拉菜单 */
  .navbar-expand-lg .navbar-nav .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

为什么这么写？ #

• 用@media (min-width: 992px)限制仅在大屏生效，小屏不受影响
• 不用display: none是因为它不支持过渡动画，改用opacity+visibility+transform实现平滑的展开/收起效果
• 完全贴合Bootstrap的原生结构，不会破坏原有样式

方法二：jQuery实现（适合需要额外交互的场景） #

如果需要更灵活的控制（比如点击页面其他地方自动收起菜单，或者给小屏加特殊逻辑），可以用JS操作Bootstrap的原生show类：

// 监听下拉菜单的悬停事件
$('.dropdown').hover(
  function() {
    // 鼠标进入时，给父级和下拉菜单添加show类
    $(this).addClass('show');
    $(this).find('.dropdown-menu').addClass('show');
    // 同时更新dropdown-toggle的aria-expanded属性，符合无障碍标准
    $(this).find('.dropdown-toggle').attr('aria-expanded', 'true');
  },
  function() {
    // 鼠标离开时移除show类
    $(this).removeClass('show');
    $(this).find('.dropdown-menu').removeClass('show');
    $(this).find('.dropdown-toggle').attr('aria-expanded', 'false');
  }
);

// 可选：点击下拉菜单内部时，阻止事件冒泡，避免菜单意外收起
$('.dropdown-menu').click(function(e) {
  e.stopPropagation();
});

注意事项 #

• 确保你的页面已经引入了jQuery（Bootstrap 4依赖jQuery）
• 这个方法会接管下拉菜单的触发逻辑，如果你还需要保留点击功能，可以调整代码同时支持hover和click

最后检查你的HTML结构 #

确保下拉菜单部分是标准的Bootstrap结构，比如：

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <!-- 其他导航项 -->
    <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">
        Dropdown
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Action</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>

关键是要有.dropdown类的父容器，以及内部的.dropdown-toggle和.dropdown-menu。

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