Question

我想以编程方式折叠除Bootstrap 3可折叠手风琴中的第一项以外的所有项目。但是，我遇到了一些奇怪的行为。请查看这个小提琴，让我知道什么是错的。

$('button').click(function(){
    var panels = $('#accordion').find('.panel-collapse');
    panels.collapse('hide');
    panels.first().collapse('show');
});

第一次单击该按钮时，其行为与第二次单击该按钮时的行为不同。后续点击似乎在所需行为和每个项目的折叠之间交替。

Answer 1

试试这个：

$('#a').click(function(){
   var panels = $('#accordion').find('.panel-collapse').not("#collapseOne");
   panels.collapse('hide');
   panels.collapse('show');
});

更新了fiddle

如果我理解你的问题。你想“崩溃除了第一个”。非常直截了当地使用.not("selector")来排除它。

Answer 2

我找到了我正在寻找的解决方案。事实证明，必须首先初始化可折叠元素，否则第一次调用show / hide将执行初始化，并导致此“切换”。我一直在观察和试图避免的行为。

因此，要显示/隐藏面板，最好写一下：

$('#accordion').find('.panel-collapse').collapse({toggle: false}).collapse('show');

然后隐藏除第一个之外的所有内容：

$('#accordion').find('.panel-collapse:gt(0)').collapse({toggle: false}).collapse('hide');
$('#accordion').find('.panel-collapse:first').collapse({toggle: false}).collapse('show');

Answer 3

延迟显示，以便隐藏动画完成：

 $('#a').click(function(){
    $('#accordion .in').collapse('hide');

  setTimeout(function(){ $('#collapseOne').collapse('show'); }, 500);

 });

http://jsfiddle.net/k9o2j53a/6/

您可以根据自己的目的调整延迟

除了第一个，Twitter Bootstrap崩溃了

3 个答案: