如何在从小屏切换到大屏时强制关闭Bootstrap下拉菜单？

当然有办法搞定这个问题！我之前做项目时也遇到过一模一样的场景，结合Bootstrap的特性加几行JS代码就能完美解决。

核心思路 #

我们需要监听窗口的尺寸变化，当屏幕宽度超过Bootstrap的大屏断点（默认是992px，对应lg尺寸）时，手动强制关闭所有处于展开状态的下拉菜单。这样就能避免小屏打开的下拉在大屏状态下残留，和你通过媒体查询实现的hover展开功能也不会冲突。

具体实现代码 #

这里用原生JavaScript来实现，兼容性更好，也不需要依赖jQuery：

// 防抖函数，避免窗口拖动时频繁触发逻辑，优化性能
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 处理窗口尺寸变化的核心逻辑
function handleNavbarResize() {
  // 这里的断点值对应Bootstrap默认的lg大屏断点，如果你自定义了断点，记得修改这个数值
  const desktopBreakpoint = 992;
  
  // 当屏幕宽度达到或超过大屏断点时
  if (window.innerWidth >= desktopBreakpoint) {
    // 找到所有处于展开状态的下拉菜单
    const openDropdowns = document.querySelectorAll('.dropdown.show');
    
    // 逐个关闭这些下拉菜单
    openDropdowns.forEach(dropdown => {
      // 移除Bootstrap标记展开状态的show类
      dropdown.classList.remove('show');
      // 找到对应的下拉按钮，更新aria-expanded属性为false（符合无障碍规范）
      const toggleBtn = dropdown.querySelector('.dropdown-toggle');
      if (toggleBtn) {
        toggleBtn.setAttribute('aria-expanded', 'false');
      }
    });
  }
}

// 给窗口绑定防抖后的resize事件，250ms的延迟是比较合理的平衡值
window.addEventListener('resize', debounce(handleNavbarResize, 250));

额外说明 #

1. 自定义断点适配：如果你在项目里修改了Bootstrap的默认断点（比如把大屏断点改成1200px），一定要同步修改代码里的desktopBreakpoint数值。
2. 防抖的作用：防抖函数是为了避免窗口拖动过程中频繁执行关闭逻辑，减少不必要的DOM操作，提升页面性能。
3. 和hover展开的兼容性：这个逻辑只会在屏幕切换到大屏时触发一次，关闭残留的下拉菜单，之后你通过媒体查询实现的hover展开功能可以正常工作，完全不会互相干扰。

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