Bootstrap 3.2.0中点击父菜单时如何关闭其他展开的子菜单？

我明白你的问题了——用Bootstrap 3.2.0实现的菜单，点击父菜单（比如Services）会展开对应的子菜单，但点击其他父菜单时，之前展开的子菜单不会自动关闭，导致多个子菜单同时显示。这是因为Bootstrap默认的collapse组件没有内置互斥展开的逻辑，不过有两种简单的解决方案：

方案一：使用Bootstrap原生Accordion组件（推荐） #

Bootstrap的Accordion组件本身就支持“仅展开一个面板”的互斥行为，你只需要调整HTML结构即可，不需要额外写JS：

1. 给所有菜单的父容器添加panel-group类，并设置一个唯一ID（比如menuAccordion）
2. 每个父菜单+子菜单的组合包裹在panel panel-default容器中
3. 父菜单的触发链接添加data-parent="#menuAccordion"属性，指向父容器的ID
4. 子菜单容器使用panel-collapse collapse类

示例代码：

<!-- 菜单父容器 -->
<div class="panel-group" id="menuAccordion">
  <!-- 第一个父菜单（Services） -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#menuAccordion" href="#servicesSubmenu">
          Services
        </a>
      </h4>
    </div>
    <!-- Services子菜单 -->
    <div id="servicesSubmenu" class="panel-collapse collapse">
      <div class="panel-body">
        <ul class="list-unstyled">
          <li>Web Development</li>
          <li>UI/UX Design</li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 第二个父菜单（About） -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#menuAccordion" href="#aboutSubmenu">
          About
        </a>
      </h4>
    </div>
    <!-- About子菜单 -->
    <div id="aboutSubmenu" class="panel-collapse collapse">
      <div class="panel-body">
        <ul class="list-unstyled">
          <li>Our Team</li>
          <li>Company History</li>
        </ul>
      </div>
    </div>
  </div>
</div>

这样配置后，Bootstrap会自动处理互斥逻辑：点击新的父菜单时，之前展开的子菜单会自动关闭。

方案二：自定义JavaScript控制（适合不想大幅修改HTML的场景） #

如果你不想调整现有HTML结构，可以通过自定义JS来实现互斥展开：

1. 给所有父菜单的触发元素添加一个统一的类（比如parent-menu-trigger）
2. 编写JS代码，监听点击事件，关闭所有非当前目标的collapse，再切换当前的collapse

示例代码：

// 监听所有父菜单触发元素的点击事件
$('.parent-menu-trigger').on('click', function(e) {
  // 阻止默认跳转行为（如果用的是<a>标签）
  e.preventDefault();
  // 获取当前要展开的子菜单ID
  const targetSubmenu = $(this).attr('href');
  // 关闭所有其他已展开的子菜单
  $('.collapse').not(targetSubmenu).collapse('hide');
  // 切换当前子菜单的展开/收起状态
  $(targetSubmenu).collapse('toggle');
});

对应的HTML结构（保留你原来的结构，只添加类）：

<!-- 父菜单触发元素 -->
<a href="#servicesSubmenu" class="parent-menu-trigger" data-toggle="collapse">Services</a>
<!-- 子菜单 -->
<div id="servicesSubmenu" class="collapse">
  <ul>
    <li>Web Development</li>
    <li>UI/UX Design</li>
  </ul>
</div>

<a href="#aboutSubmenu" class="parent-menu-trigger" data-toggle="collapse">About</a>
<div id="aboutSubmenu" class="collapse">
  <ul>
    <li>Our Team</li>
    <li>Company History</li>
  </ul>
</div>

注意：如果使用这个方案，建议去掉触发元素上的data-toggle="collapse"属性，避免和自定义JS的逻辑冲突。

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