Bootstrap 4 Navbar折叠问题：点击新按钮时收起已展开区域

嘿，这个问题很常见，核心就是要让各个展开区域之间形成“互斥”——点击一个时自动收起其他的。我给你一套简单的实现方案，你可以直接套用到你的代码里：

第一步：给元素统一类名（方便JS操作） #

首先确保你的HTML结构里，每个按钮和对应的展开区域有统一的类名，同时给按钮加一个关联属性来指定要控制的内容，比如这样：

<!-- Navbar按钮示例 -->
<button class="nav-toggle-btn" data-target="#search-content">
  <!-- 搜索图标 -->
</button>
<button class="nav-toggle-btn" data-target="#login-content">
  <!-- Inloggen图标 -->
</button>
<button class="nav-toggle-btn" data-target="#cart-content">
  <!-- 购物车图标 -->
</button>
<button class="nav-toggle-btn" data-target="#menu-content">
  <!-- 菜单图标 -->
</button>

<!-- 对应展开区域示例 -->
<div id="search-content" class="nav-collapse-content">搜索表单内容...</div>
<div id="login-content" class="nav-collapse-content">登录表单内容...</div>
<div id="cart-content" class="nav-collapse-content">购物车内容...</div>
<div id="menu-content" class="nav-collapse-content">菜单列表内容...</div>

第二步：CSS控制默认隐藏状态 #

先给展开区域设置默认隐藏，只有添加active类时才显示：

.nav-collapse-content {
  display: none;
  /* 这里可以加你的自定义样式：比如内边距、背景色、动画过渡等 */
}

.nav-collapse-content.active {
  display: block;
}

第三步：JavaScript实现互斥展开逻辑 #

用JS给每个按钮绑定点击事件，核心逻辑是：点击按钮时先收起所有已展开的区域，再切换当前按钮对应的区域状态：

// 获取所有切换按钮和展开区域
const toggleBtns = document.querySelectorAll('.nav-toggle-btn');
const collapseContents = document.querySelectorAll('.nav-collapse-content');

// 给每个按钮添加点击事件
toggleBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    // 获取当前按钮要控制的目标区域
    const targetId = btn.getAttribute('data-target');
    const targetContent = document.querySelector(targetId);

    // 先收起所有非当前目标的展开区域
    collapseContents.forEach(content => {
      if (content !== targetContent) {
        content.classList.remove('active');
      }
    });

    // 切换当前目标区域的显示状态（如果需要点击同一按钮可以收起，就用toggle；如果只能展开就改成add）
    targetContent.classList.toggle('active');
  });
});

额外小提示 #

• 如果你的按钮是图标（比如SVG、Font Awesome），只要给图标所在的容器加上nav-toggle-btn类，逻辑完全通用。
• 如果不需要“点击同一按钮收起”的功能，把代码里的toggle改成add就行，这样点击按钮只会展开，不会自动收起（除非点击其他按钮）。

这样修改后，你点击任意一个按钮，其他已经展开的区域都会自动收起，完美实现你要的“仅显示一个展开区域”的效果！

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