Bootstrap响应式菜单刷新适配问题：移动端手风琴菜单异常求助

你的问题核心是窗口尺寸变化时，菜单的交互逻辑没有同步更新：页面加载时仅根据当时的屏幕尺寸绑定了对应事件（桌面悬停/移动端点击），当从桌面端缩小到移动端时，原有的桌面悬停事件没有被移除，移动端的手风琴点击事件也没有重新绑定，导致子菜单无法响应操作。

解决方案：统一状态管理 + 窗口 resize 监听 #

以下是修复后的完整实现逻辑：

1. 封装菜单行为处理函数：根据当前屏幕尺寸，动态绑定/解绑对应的交互事件，并同步子菜单的显示状态
2. 初始化执行：页面加载时立即执行一次，适配初始屏幕尺寸
3. 监听窗口 resize：通过防抖避免频繁触发，确保尺寸变化时重新调整菜单行为

完整代码示例

// 核心菜单行为设置函数
function setupMenu() {
  const isMobile = window.innerWidth < 991;
  const dropdownParents = document.querySelectorAll('.dropdown');

  dropdownParents.forEach(parent => {
    const toggleBtn = parent.querySelector('.dropdown-toggle');
    const subMenu = parent.querySelector('.dropdown-menu');

    // 先移除所有旧事件，避免重复绑定
    parent.removeEventListener('mouseenter', showSubMenu);
    parent.removeEventListener('mouseleave', hideSubMenu);
    toggleBtn.removeEventListener('click', toggleAccordion);

    if (isMobile) {
      // 移动端：绑定手风琴点击事件
      toggleBtn.addEventListener('click', toggleAccordion);
      // 确保初始状态子菜单隐藏（除非已经手动展开）
      if (!parent.classList.contains('show')) {
        subMenu.style.display = 'none';
      }
    } else {
      // 桌面端：绑定悬停事件
      parent.addEventListener('mouseenter', showSubMenu);
      parent.addEventListener('mouseleave', hideSubMenu);
      // 桌面端子菜单默认隐藏
      subMenu.style.display = 'none';
      parent.classList.remove('show');
    }
  });
}

// 桌面端悬停显示子菜单
function showSubMenu() {
  this.querySelector('.dropdown-menu').style.display = 'block';
  this.classList.add('show');
}

// 桌面端离开隐藏子菜单
function hideSubMenu() {
  this.querySelector('.dropdown-menu').style.display = 'none';
  this.classList.remove('show');
}

// 移动端手风琴切换逻辑
function toggleAccordion(e) {
  e.preventDefault(); // 阻止默认跳转或Bootstrap原生行为
  const parent = this.closest('.dropdown');
  const subMenu = parent.querySelector('.dropdown-menu');
  const isOpen = parent.classList.contains('show');

  if (isOpen) {
    subMenu.style.display = 'none';
    parent.classList.remove('show');
  } else {
    subMenu.style.display = 'block';
    parent.classList.add('show');
  }
}

// 页面初始化时执行
setupMenu();

// 窗口resize监听（加防抖优化性能）
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(setupMenu, 250);
});

配套CSS调整（可选）

确保移动端子菜单的布局符合手风琴样式，避免Bootstrap原生绝对定位的影响：

@media (max-width: 991px) {
  .dropdown-menu {
    position: static;
    border: none;
    box-shadow: none;
    margin-top: 0.5rem;
  }
}

关键修复点 #

• 事件解绑：每次重新设置菜单行为前，移除所有旧事件，避免重复绑定导致的逻辑冲突
• 状态同步：切换屏幕尺寸时，强制同步子菜单的显示状态，确保和当前交互逻辑匹配
• 防抖处理：窗口resize时添加防抖，避免频繁触发函数影响性能

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