嘿，我之前刚好折腾过类似的需求！你已经把Bootstrap 5的水平导航改成垂直侧边栏，折叠后宽度不到100px只显示图标，现在想让侧边栏一折叠，那些原本处于激活展开状态的下拉菜单也自动收起来，对吧？我来分享下我当时的解决办法，亲测有效~

首先得理清楚逻辑：Bootstrap的下拉菜单一旦激活（带有show类）就会保持展开状态，所以我们要做的就是在侧边栏触发折叠的瞬间，手动关闭所有展开的下拉菜单。下面分步骤来实现：

1. 先补全侧边栏的基础样式（适配折叠需求） #

先确保你的侧边栏有平滑的折叠过渡，并且折叠后只显示图标，比如：

.page {
  min-height: 100vh;
  display: flex;
}

.site-header {
  padding: 0 10px;
  height: 60px;
  border-bottom: 1px solid #e5e7eb;
}

/* 侧边栏默认样式 */
.sidebar {
  width: 250px;
  background-color: #343a40;
  transition: width 0.3s ease;
  overflow: hidden;
}

/* 折叠后的侧边栏样式 */
.sidebar.collapsed {
  width: 80px;
}

/* 折叠后隐藏导航文字，只保留图标 */
.sidebar.collapsed .nav-link span {
  display: none;
}

.sidebar .nav-link {
  color: white;
  display: flex;
  align-items: center;
  gap: 10px; /* 图标与文字的间距 */
}

2. 核心JavaScript逻辑（监听折叠状态，关闭下拉菜单） #

假设你的侧边栏是通过一个按钮（比如id为sidebarToggle）触发折叠，侧边栏容器id为sidebar，我们监听按钮点击事件，在折叠时主动关闭所有激活的下拉菜单：

// 获取需要操作的DOM元素
const sidebar = document.getElementById('sidebar');
const sidebarToggle = document.getElementById('sidebarToggle');

// 监听侧边栏切换按钮的点击事件
sidebarToggle.addEventListener('click', () => {
  // 切换侧边栏的折叠类
  sidebar.classList.toggle('collapsed');

  // 判断当前是否处于折叠状态
  if (sidebar.classList.contains('collapsed')) {
    // 找到所有处于展开状态的下拉菜单
    const activeDropdowns = document.querySelectorAll('.dropdown-menu.show');
    
    // 遍历每个展开的下拉菜单，调用Bootstrap的API关闭
    activeDropdowns.forEach(dropdownMenu => {
      // 获取对应的Dropdown实例
      const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(dropdownMenu.closest('.dropdown'));
      // 执行关闭操作
      dropdownInstance.hide();
    });
  }
});

3. 可选优化：展开侧边栏时恢复之前的激活下拉菜单 #

如果你希望展开侧边栏后，之前激活的下拉菜单能自动展开回来，可以加个小逻辑记录折叠前的状态：

let lastActiveDropdown = null; // 用来存储折叠前的激活下拉菜单

sidebarToggle.addEventListener('click', () => {
  if (sidebar.classList.contains('collapsed')) {
    // 折叠时：记录当前展开的下拉菜单，然后关闭所有
    lastActiveDropdown = document.querySelector('.dropdown-menu.show')?.closest('.dropdown');
    
    const activeDropdowns = document.querySelectorAll('.dropdown-menu.show');
    activeDropdowns.forEach(dropdownMenu => {
      const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(dropdownMenu.closest('.dropdown'));
      dropdownInstance.hide();
    });
  } else {
    // 展开时：如果有记录的激活下拉菜单，重新展开
    if (lastActiveDropdown) {
      const dropdownInstance = bootstrap.Dropdown.getOrCreateInstance(lastActiveDropdown);
      dropdownInstance.show();
    }
  }
});

重要提醒 #

• 一定要确保页面已经引入了Bootstrap 5的JavaScript文件，不然bootstrap.Dropdown这个核心类会无法使用！
• 如果你的侧边栏是用Bootstrap官方的Collapse组件控制折叠的，只需把事件监听换成hide.bs.collapse（侧边栏开始折叠时触发），核心逻辑完全一致。

这样调整后，侧边栏一折叠，所有展开的下拉菜单就会自动收起来，完全符合你的需求啦！

内容来源于stack exchange