將元素屬性與javascript折疊方法結合使用時，Bootstrap折疊無法正常工作

Question

我正在使用Bootstrap手風琴創建一個逐步過程，其中第一手風琴中的用戶有兩個選擇。 如果選擇第一個選項，則第一個手風琴應折疊而第二個手風琴應打開。 如果選擇了第二個選項，則第一個應折疊，第三個應打開。 為此，我使用按鈕和collapse方法的onclick事件。

當前正在使用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方法）顯示和折疊手風琴，以解決此問題？

這是一個小提琴來嘗試。

Answer 1

經過研究，最簡單的解決方案是使用Bootstrap折疊類公開的show.bs.collapse事件折疊面板組中所有打開的可折疊對象。

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