Bootstrap Collapse手风琴：JS打开面板未自动关闭其他面板

首先咱们得先弄明白为啥会出现这个奇怪的现象：Bootstrap手风琴自动关闭其他面板的逻辑，是依赖data-parent属性配合点击触发的原生事件来实现的。当你手动点击带data-toggle="collapse"和data-parent的面板标题链接时，Bootstrap内部会自动找到data-parent指定容器下所有已展开的面板，把它们逐一折叠。但直接调用collapse('show')方法时，这套自动关闭的逻辑并没有被触发——除非这个面板之前已经被手动操作过（也就是你说的先点面板关闭再用JS打开就正常的情况，这时候面板的状态已经被Bootstrap的事件系统标记完整了）。

下面给你两种简单有效的解决办法：

方法一：手动先关闭其他已展开面板 #

在每个打开面板的函数里，先把父容器下所有处于展开状态的面板（Bootstrap用.in类标记）折叠，再打开目标面板：

function openBreakfast() {
  // 关闭父容器下所有已展开的面板
  $('#food-tracker-accordion .in').collapse('hide');
  // 打开目标面板
  $('#add-breakfast-form').collapse('show');
}

function openLunch() {
  $('#food-tracker-accordion .in').collapse('hide');
  $('#add-lunch-form').collapse('show');
}

function openDinner() {
  $('#food-tracker-accordion .in').collapse('hide');
  $('#add-dinner-form').collapse('show');
}

function openSnacks() {
  $('#food-tracker-accordion .in').collapse('hide');
  $('#add-snacks-form').collapse('show');
}

这个思路很直接，就是手动模拟Bootstrap点击事件时的处理逻辑，先清理已展开的面板，再打开目标。

方法二：模拟点击面板的触发链接 #

既然手动点击标题链接能完美触发手风琴的自动关闭逻辑，那咱们可以用JS模拟点击对应的<a>标签，替代直接调用collapse('show')：

function openBreakfast() {
  $('[href="#add-breakfast-form"]').click();
}

function openLunch() {
  $('[href="#add-lunch-form"]').click();
}

function openDinner() {
  $('[href="#add-dinner-form"]').click();
}

function openSnacks() {
  $('[href="#add-snacks-form"]').click();
}

这种方法更贴合Bootstrap的原生逻辑，点击事件会触发Bootstrap内置的所有手风琴处理流程，包括自动关闭其他面板，不需要自己手动处理折叠操作。

效果验证 #

不管用哪种方法，你点击页面上的按钮时，现在都能正常打开目标面板，同时自动关闭其他已打开的面板，和手动点击面板标题的效果完全一致。

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