Bootstrap 4导航栏需求咨询：大屏hover开下拉，小屏点击触发

我来帮你完善这个Bootstrap 4导航栏的响应式下拉逻辑！你已经有了一个不错的开头，我们只需要补充屏幕尺寸判断和小屏的原生点击恢复，就能完美实现「大屏悬停、小屏点击」的交互需求。

首先，确保你的导航栏是标准的Bootstrap 4结构 #

如果还没搭好基础结构，这里给你一个可直接复用的示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar Demo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarDropdowns" aria-controls="navbarDropdowns" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarDropdowns">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="mainDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          主下拉菜单
        </a>
        <div class="dropdown-menu" aria-labelledby="mainDropdown">
          <a class="dropdown-item" href="#">子项1</a>
          <a class="dropdown-item" href="#">子项2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">子项3</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="secondDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          第二个下拉
        </a>
        <div class="dropdown-menu" aria-labelledby="secondDropdown">
          <a class="dropdown-item" href="#">更多选项</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

完整的jQuery实现代码 #

这段代码会自动根据屏幕尺寸切换交互逻辑，同时修复你现有代码的细节漏洞（比如可访问性属性维护、防抖处理）：

// 匹配Bootstrap 4的大屏断点（lg=992px）
const lgScreenBreakpoint = 992;

// 核心处理函数：切换下拉菜单的交互逻辑
function setupDropdownBehavior() {
  if ($(window).width() >= lgScreenBreakpoint) {
    // 大屏设备：启用鼠标悬停展开/收起
    $('body')
      .off('click', '.dropdown-toggle') // 解绑点击事件，避免冲突
      .on('mouseenter mouseleave', '.dropdown', function(e) {
        const $dropdown = $(e.target).closest('.dropdown');
        const $menu = $dropdown.find('.dropdown-menu');
        const $toggle = $dropdown.find('.dropdown-toggle');

        if (e.type === 'mouseenter') {
          $dropdown.addClass('show');
          $menu.addClass('show');
          $toggle.attr('aria-expanded', 'true'); // 更新可访问性属性
        } else {
          $dropdown.removeClass('show');
          $menu.removeClass('show');
          $toggle.attr('aria-expanded', 'false');
        }
      });
  } else {
    // 小屏设备：恢复原生点击触发逻辑
    $('body')
      .off('mouseenter mouseleave', '.dropdown') // 解绑鼠标事件
      .on('click', '.dropdown-toggle', function(e) {
        const $dropdown = $(this).closest('.dropdown');
        const isExpanded = $dropdown.hasClass('show');

        // 阻止#链接的默认跳转行为
        e.preventDefault();

        if (isExpanded) {
          $dropdown.removeClass('show');
          $dropdown.find('.dropdown-menu').removeClass('show');
          $(this).attr('aria-expanded', 'false');
        } else {
          $dropdown.addClass('show');
          $dropdown.find('.dropdown-menu').addClass('show');
          $(this).attr('aria-expanded', 'true');
        }
      });
  }
}

// 页面加载时初始化
$(document).ready(function() {
  setupDropdownBehavior();
});

// 窗口大小改变时重新适配（加入防抖避免频繁触发）
$(window).on('resize', function() {
  clearTimeout($.data(this, 'resizeTimer'));
  $.data(this, 'resizeTimer', setTimeout(function() {
    setupDropdownBehavior();
  }, 250));
});

关键细节说明 #

• 断点匹配：用lgScreenBreakpoint对应Bootstrap 4的lg断点，确保和框架的响应式布局完全同步
• 事件解绑：切换逻辑时记得解绑之前的事件，避免悬停和点击事件互相干扰
• 可访问性：更新aria-expanded属性，让屏幕阅读器能正确识别菜单状态
• 防抖处理：窗口resize时加入250ms的延迟，避免频繁执行逻辑，提升页面性能
• 动态元素兼容：用body作为事件委托容器，即使下拉菜单是AJAX动态生成的也能正常工作

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