如何实现两个下拉菜单互斥切换，同一时间仅显示一个？

要实现搜索、导航两个折叠菜单的互斥展开——打开一个时自动关闭另一个，核心是在触发其中一个菜单切换时，同步检查并控制另一个菜单的状态，同时匹配图标显示。结合你使用的Bootstrap 5 Collapse组件，可通过以下方式实现：

修改后的完整代码 #

HTML（保持原结构无需改动）

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light shadow">
  <div class="container-fluid nav-container">
    <h3 class="logo">Logo Here</h3>
    <div class="navbar-right">
      <!-- 搜索按钮 -->
      <button class="btn border-0 collapsed nav-btn me-3" type="button" data-bs-toggle="collapse" data-bs-target="#search-content">
        <div class="search-toggle">
          <div class="search">
            <i class="fa-solid fa-magnifying-glass"></i>
          </div>
        </div>
      </button>

      <!-- 导航按钮 -->
      <button type="button" class="navbar-toggler collapsed nav-btn" data-bs-toggle="collapse" data-bs-target="#navbar-content">
        <div class="hamburger-toggle">
          <div class="hamburger">
            <i class="fa-sharp fa-solid fa-bars"></i>
          </div>
        </div>
      </button>
    </div>
    <!-- 搜索内容 -->
    <div class="collapse search-collapse" id="search-content">
      <h4>Search Options</h4>
    </div>
    <!-- 导航内容 -->
    <div class="collapse navbar-collapse" id="navbar-content">
      <h4>Navigation Options</h4>
    </div>
  </div>
</nav>

CSS（保留原样式）

.search-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  padding: 1rem 0;
  min-height: 1px;
}

JavaScript（核心修改部分）

// 获取元素
const hamburgerMenuBtn = document.querySelector('.hamburger-toggle i');
const magnifyingGlassBtn = document.querySelector('.search-toggle i');
const searchCollapse = document.getElementById('search-content');
const navCollapse = document.getElementById('navbar-content');

// 初始化Bootstrap Collapse实例，toggle: false 避免自动触发切换
const searchCollapseInstance = new bootstrap.Collapse(searchCollapse, { toggle: false });
const navCollapseInstance = new bootstrap.Collapse(navCollapse, { toggle: false });

// 导航按钮点击事件
document.querySelector('.hamburger-toggle').addEventListener('click', function() {
  const isNavOpen = navCollapse.classList.contains('show');
  if (isNavOpen) {
    // 关闭导航菜单并还原图标
    navCollapseInstance.hide();
    hamburgerMenuBtn.classList.remove('fa-x');
    hamburgerMenuBtn.classList.add('fa-bars');
  } else {
    // 打开导航菜单并切换图标
    navCollapseInstance.show();
    hamburgerMenuBtn.classList.add('fa-x');
    hamburgerMenuBtn.classList.remove('fa-bars');
    // 若搜索菜单已展开，关闭并还原其图标
    if (searchCollapse.classList.contains('show')) {
      searchCollapseInstance.hide();
      magnifyingGlassBtn.classList.remove('fa-x');
      magnifyingGlassBtn.classList.add('fa-magnifying-glass');
    }
  }
});

// 搜索按钮点击事件
document.querySelector('.search-toggle').addEventListener('click', function() {
  const isSearchOpen = searchCollapse.classList.contains('show');
  if (isSearchOpen) {
    // 关闭搜索菜单并还原图标
    searchCollapseInstance.hide();
    magnifyingGlassBtn.classList.remove('fa-x');
    magnifyingGlassBtn.classList.add('fa-magnifying-glass');
  } else {
    // 打开搜索菜单并切换图标
    searchCollapseInstance.show();
    magnifyingGlassBtn.classList.add('fa-x');
    magnifyingGlassBtn.classList.remove('fa-magnifying-glass');
    // 若导航菜单已展开，关闭并还原其图标
    if (navCollapse.classList.contains('show')) {
      navCollapseInstance.hide();
      hamburgerMenuBtn.classList.remove('fa-x');
      hamburgerMenuBtn.classList.add('fa-bars');
    }
  }
});

关键逻辑说明 #

1. 精准控制折叠状态：通过Bootstrap官方的Collapse实例调用show()/hide()方法，替代原生data-bs-toggle的自动切换，避免状态冲突。
2. 互斥判断：每次操作当前菜单时，检查另一个菜单的show类（Bootstrap标记展开状态的类），若已展开则同步关闭。
3. 图标状态同步：确保菜单的展开/关闭状态与图标显示完全匹配，避免出现菜单已关闭但图标仍显示关闭样式的异常。

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