Bootstrap展开全部标签后折叠

Question

我的Boostrap Collapse控件中的行为是让只有一个标签打开。因此，当我尝试展开一个标签时，已打开的标签已关闭，并且新标签已打开。一切正常。

然而，有一个场景，我需要让我使用此代码展开所有选项卡，展开所有选项卡：

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

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

而这种代码以关闭所有标签：

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

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

问题是，在所有选项卡用代码缩小后，控件的初始行为被打破，现在当我展开另一个选项卡时，打开的选项卡未关闭，可扩展多个选项卡。

我在做什么错？我想重新启动最初的行为。

我的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