展开所有选项卡后，Bootstrap Collapse 损坏答案

【问题标题】：Bootstrap Collapse broken after expand all tabs展开所有选项卡后，Bootstrap Collapse 损坏
【发布时间】：2017-03-29 09:24:53
【问题描述】：

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

【问题讨论】：

你能发布你所有的代码，或者创建一个 bootply/fiddle 吗？
@ZimSystem 我认为这不会是 HTML 问题，但我已经发布了我的代码示例 ;-)
所有的 JS 怎么样？是什么触发了“全部展开”？
@ZimSystem 帖子已更新 :-)

标签： twitter-bootstrap tabs collapse expand

【解决方案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

【讨论】：

这不起作用，在您的示例中，您可以重现我遇到的错误：控件的第一个行为是只打开一个选项卡。展开全部并缩小全部后，行为会发生变化，并且会保持 N 个选项卡处于打开状态。
我更新了示例。必须移除 Bootstrap 折叠组件，然后重新应用以重置手风琴行为。