结合使用元素属性和javascript折叠方法时，Bootstrap折叠无法正常工作答案

【问题标题】：Bootstrap collapse not working properly when using element attributes in combination with javascript collapse method结合使用元素属性和javascript折叠方法时，Bootstrap折叠无法正常工作
【发布时间】：2016-03-30 21:40:28
【问题描述】：

我正在使用Bootstrap accordion 创建一个分步过程，其中第一个手风琴中的用户有两个选项。如果选择第一个选项，第一个手风琴应该折叠，第二个应该打开。如果选择第二个选项，第一个应该折叠，第三个应该打开。为此，我使用按钮的 onclick 事件和 collapse 方法。

目前使用上面链接中的 Bootstrap 手风琴示例中的代码。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <button id="btnOne" class="btn btn-default col-xs-12">
        First option
        </button>
        <button id="btnTwo" class="btn btn-default col-xs-12">
        Second option
        </button>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Second panel
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Third panel
      </div>
    </div>
  </div>
</div>

我为按钮添加了点击事件，如下所示，以显示和隐藏可折叠项。

$('#btnOne').on('click', function() {
    $('#collapseOne').collapse('hide');
    $('#collapseTwo').collapse('show');
});
$('#btnTwo').on('click', function() {
    $('#collapseOne').collapse('hide');
    $('#collapseThree').collapse('show');
});

现在问题来了：在单击任何按钮之前，默认手风琴功能（通过使用 html 元素上的属性），（例如，单击一个手风琴的标题会打开它并关闭其他手风琴）但是在使用 javascript 方法与使用属性的功能结合使用时似乎存在问题。

示例1：如果我打开第二个手风琴，没有按第一个手风琴中的按钮，然后打开第一个手风琴按“第一个选项”按钮打开第二个手风琴它是没有打开。 javascript $('#collapseTwo').collapse('show') 似乎没有被触发。

示例 2： 如果我直接单击第一个选项，则在页面加载后，第二个手风琴会正确打开。现在的问题是，通过单击标题打开第一个手风琴时，它不会折叠第二个手风琴。

是否可以将 javascript 方法与 data-toggle="collapse" 和其他属性结合使用并从两者的功能中受益？

或者，我是否需要手动（通过触发 javascript 方法）显示和折叠手风琴，以解决问题？

这里是a fiddle 试试看。

【问题讨论】：

标签： javascript jquery twitter-bootstrap accordion

【解决方案1】：

经过一番研究，最简单的解决方案是使用 Bootstrap 的折叠类公开的 show.bs.collapse 事件来折叠面板组中所有打开的可折叠项。

$('.collapse').on('show.bs.collapse', function () {
    $('#accordion').find('.collapse.in').collapse('hide');
});

【讨论】：