ブートストラップの崩壊は、私<strong>ブートストラップ崩壊制御</strong>内のすべてのタブ

Question

振る舞いを拡張することは一つだけのタブを開いていることです。だから私は1つのタブを展開しようとすると、開いていたタブが閉じられ、新しいタブが開いています。すべてうまく動作します。

$('#closeAllBtn').click(function (e) { 
    e.preventDefault(); 

    $('#accordion .collapse').collapse('hide'); 
}); 

：すべてのタブを閉じるには

$('#openAllBtn').click(function (e) { 
    e.preventDefault(); 

    $('#accordion .collapse').collapse('show'); 
}); 

そして、このコード：

しかし、私はすべてのタブを拡張するために、このコードを使用するように、すべてのタブを展開する必要があるシナリオがあります

すべてのタブがそのコードで縮小された後、コントロールの最初の動作が壊れています今開いているタブは、別のタブを展開すると閉じられず、複数のタブを展開できます。

私は間違っていますか？私は最初の動作を再開したい。

私のHTML：私はあなたがこれをしたい

<ul class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-1"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-1" aria-expanded="false" aria-controls="collapse-category-1"> 
       My title 1 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-1" role="tabpanel" aria-labelledby="collapse-heading-1"> 
      <div class="panel-body"> 
       My body 1 
      </div> 
     </div> 
    </li> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-2"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-2" aria-expanded="false" aria-controls="collapse-category-2"> 
       My title 2 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-2" role="tabpanel" aria-labelledby="collapse-heading-2"> 
      <div class="panel-body"> 
       My body 2 
      </div> 
     </div> 
    </li> 
    <li class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="collapse-heading-3"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-category-3" aria-expanded="false" aria-controls="collapse-category-3"> 
       My title 3 
      </a> 
     </div> 
     <div class="panel-collapse collapse" id="collapse-category-3" role="tabpanel" aria-labelledby="collapse-heading-3"> 
      <div class="panel-body"> 
       My body 3 
      </div> 
     </div> 
    </li> 
</ul> 

Answer 1

と思います。..

$('.open-all').click(function(){ 
    $('.panel-collapse').removeData('bs.collapse') 
    .collapse({parent:false, toggle:false}) 
    .collapse('show') 
    .removeData('bs.collapse') 
    .collapse({parent:'#accordion', toggle:false}); 
}); 

http://www.codeply.com/go/03TTywsINc