> Onload：一组中的每个手风琴小组完全崩溃，作为记录/预期的功能。
>按钮单击：每个手风琴面板展开并单击切换无效(包括URL锚点效果)。
>另一个按钮点击：所有面板返回上载状态;全部折叠和正常点击。
我已经做到了第2步，但是当我在第3步再次点击按钮时，它没有任何效果。我也看不到Chrome开发工具中报告的控制台错误，或通过本地JSHint运行代码。
每次点击按钮时，我都希望这个循环是可重复的。
我已经在http://bootply.com/98140和http://jsfiddle.net/A9vCx/设置了我的代码
我很想知道我在做错什么，我很感激你的建议。谢谢！
我的HTML：
<button class="collapse-init">Click to disable accordion behavior</button> <br><br> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapSEOne"> Collapsible Group Item #1 </a> </h4> </div> <div id="collapSEOne" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> Collapsible Group Item #2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> Collapsible Group Item #3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse"> <div class="panel-body"> Anim pariatur cliche reprehenderit,enim eiusmod high life accusamus terry richardson ad squid. </div> </div> </div> </div>
我的JS：
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click',function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle','collapse');
$('.panel-collapse').collapse({'toggle': true,'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse').collapse({'toggle': true,'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});
解决方法
尝试打开设置为手风琴，即数据 – 父属性集的折叠控件的多个面板可能证明是相当有问题和错误的(请参阅multiple panels open after programmatically opening a panel上的此问题)
相反，最好的办法是：
>允许每个面板单独切换
>然后，在适当的情况下手动执行手风琴行为。
要允许每个面板单独切换，在data-toggle =“collapse”元素上，将data-target属性设置为.collapse面板ID选择器(而不是将父母父属性设置为父控件)，您可以阅读更多关于这个问题Modify Twitter Bootstrap collapse plugin to keep accordions open。
大致来说，每个面板应该如下所示：
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"
data-toggle="collapse"
data-target="#collapSEOne">
Collapsible Group Item #1
</h4>
</div>
<div id="collapSEOne"
class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
要手动执行手风琴行为，您可以为任何面板显示之前出现的崩溃显示事件创建一个处理程序。使用此功能可确保任何其他打开的面板在选定的面板显示之前关闭(请参阅此answer to multiple panels open)。您还将只希望代码在面板处于活动状态时执行。要做到这一点，添加以下代码：
$('#accordion').on('show.bs.collapse',function () {
if (active) $('#accordion .in').collapse('hide');
});
然后使用显示和隐藏来切换每个面板和数据切换的可见性，以启用和禁用控件。
$('#collapse-init').click(function () {
if (active) {
active = false;
$('.panel-collapse').collapse('show'); $('.panel-title').attr('data-toggle','');
$(this).text('Enable accordion behavior');
} else {
active = true;
$('.panel-collapse').collapse('hide'); $('.panel-title').attr('data-toggle','collapse');
$(this).text('Disable accordion behavior');
}
});
