如何实现Bootstrap 4导航栏悬停汉堡图标时展开？

嘿，这需求很好实现！Bootstrap 4默认的折叠组件只有点击触发逻辑，我们只需要加一点jQuery代码，就能给汉堡按钮添加上hover展开的效果。

修改后的完整代码 #

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Agency</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Careers</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact US</a>
        </li>
      </ul>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <!-- 给按钮添加ID，方便JS精准选择 -->
    <button id="navbarToggleBtn" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

<!-- 确保页面已引入jQuery和Bootstrap JS（如果还没加的话） -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
  // 监听汉堡按钮的hover事件
  $('#navbarToggleBtn').hover(
    // 鼠标进入时：展开导航栏
    function() {
      $('#navbarToggleExternalContent').collapse('show');
    },
    // 鼠标离开时：可选逻辑，这里设置为保持展开（需要离开即折叠的话，换成collapse('hide')）
    function() {
      // 留空则导航栏保持展开状态
      // $('#navbarToggleExternalContent').collapse('hide');
    }
  );

  // 可选优化：点击页面其他区域时自动折叠导航栏
  $(document).click(function(event) {
    if (!$(event.target).closest('#navbarToggleBtn, #navbarToggleExternalContent').length) {
      $('#navbarToggleExternalContent').collapse('hide');
    }
  });
});
</script>

代码说明 #

1. 给汉堡按钮加ID：我给按钮添加了id="navbarToggleBtn"，这样在JS里能精准选中目标元素，避免和页面其他按钮冲突。
2. hover事件逻辑：
   • 鼠标移到汉堡按钮上时，调用Bootstrap折叠组件的collapse('show')方法，手动展开导航栏。
   • 鼠标离开按钮时，你可以自由选择行为：
     • 留空函数：导航栏保持展开，直到用户主动点击按钮或触发其他折叠操作。
     • 替换为collapse('hide')：鼠标离开后自动折叠导航栏。
3. 可选的外部点击折叠逻辑：添加全局点击监听，当用户点击导航栏和汉堡按钮之外的区域时自动折叠导航栏，让交互更符合用户习惯。

注意：一定要确保页面已经引入了jQuery和Bootstrap 4的JS文件，否则折叠组件和我们写的jQuery代码都无法正常运行哦！

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