如何通过媒体查询在屏幕尺寸变化时关闭Bootstrap下拉菜单？

纯CSS媒体查询无法直接移除JS添加的show类（因为CSS仅控制样式，不能修改DOM属性），但可以结合CSS视觉隐藏+JS监听窗口 resize 事件彻底解决这个问题，以下是具体实现：

一、CSS临时隐藏方案（视觉层面） #

如果只是需要在特定屏幕宽度下隐藏展开的菜单（不修改DOM类），可以针对你的断点写媒体查询：

/* 替换为你的实际断点，比如按钮隐藏的宽度是768px，这里用max-width:767.98px匹配Bootstrap的sm断点 */
@media (max-width: 767.98px) {
  /* 强制隐藏展开的下拉菜单 */
  .dropdown-menu.show {
    display: none !important;
  }
}

⚠️ 注意：这个方案仅隐藏菜单，但DOM中的show类仍存在，当屏幕尺寸恢复时，菜单可能仍保持展开状态，适合临时场景。

二、JS+CSS彻底解决（推荐） #

通过监听窗口尺寸变化，在达到断点时移除下拉菜单和按钮的show类，同时修正ARIA属性，完全还原初始状态：

1. JS代码 #

// 定义你的断点（按钮隐藏的屏幕宽度）
const DROPDOWN_BREAKPOINT = 768;

// 处理下拉菜单状态的函数
function handleDropdownResize() {
  const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
  
  dropdownToggles.forEach(toggle => {
    // 根据你的DOM结构获取对应的下拉菜单，这里假设菜单是按钮的下一个兄弟元素
    const dropdownMenu = toggle.nextElementSibling;
    
    if (!dropdownMenu) return;
    
    if (window.innerWidth < DROPDOWN_BREAKPOINT) {
      // 移除按钮和菜单的show类，修正ARIA属性
      toggle.classList.remove('show');
      toggle.setAttribute('aria-expanded', 'false');
      dropdownMenu.classList.remove('show');
    }
  });
}

// 监听窗口resize事件
window.addEventListener('resize', handleDropdownResize);
// 页面加载时执行一次，避免初始状态异常
window.dispatchEvent(new Event('resize'));

2. 配合CSS优化（可选） #

如果需要在断点处隐藏下拉按钮，补充对应的CSS：

@media (max-width: 767.98px) {
  .dropdown-toggle {
    display: none !important;
  }
}

为什么之前的方案无效？ #

• 可能是断点设置不匹配：你需要确保媒体查询的断点和隐藏按钮的断点完全一致；
• 未同时处理下拉按钮的状态：Bootstrap的下拉组件会给按钮添加show类和aria-expanded="true"，只移除菜单的show类可能导致状态不一致；
• 纯CSS无法修改DOM类：仅靠CSS无法移除JS动态添加的类，必须配合JS监听窗口事件。

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