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

Bootstrap 展开所有选项卡后崩溃

Bootstrap Collapse broken after expand all tabs

expand

tabs

collapse

twitter-bootstrap