Bootstrap 3折叠手风琴：折叠所有作品，但在保持数据父级的同时无法展开
我正在使用Bootstrap 3并尝试设置以下手风琴/折叠结构：
-
Onload：组中的每个手风琴组都完全折叠，并按照记录/预期运行。
-
按钮单击：每个折叠面板展开并单击切换无效（包括URL锚点效果）。
-
另一个按钮点击：所有面板返回onload状态; 全部折叠并可正常点击。
我已经进入第2步，但是当我在第3步再次单击该按钮时，它没有任何效果。 我还看到Chrome Dev Tools中没有报告控制台错误，也没有通过本地JSHint运行代码。
我希望每次单击按钮时此循环都是可重复的。
我在这里设置了我的代码http://bootply.com/98140和http://jsfiddle.net/A9vCx/
我很想知道我做错了什么，我很欣赏建议。 谢谢！
我的HTML：
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 我的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'); } }); });
更新的答案
尝试打开折叠控件的多个面板（设置为手风琴，即使用data-parent属性集）可能会出现问题和错误（ 在编程打开面板后打开多个面板上的此问题）
相反，最好的方法是：
- 允许每个面板单独切换
- 然后，在适当的时候手动强制执行手风琴行为。
要允许每个面板单独切换 ，请在data-toggle="collapse"元素上，将data-target属性设置为.collapse面板ID选择器（而不是将data-parent属性设置为父控件。您可以阅读更多内容关于修改Twitter Bootstrap崩溃插件以保持手风琴打开的问题 。
粗略地说，每个面板应如下所示：
data-target="#collapseOne"> Collapsible Group Item #1
id="collapseOne" class="panel-collapse collapse">
要手动强制执行折叠行为 ，您可以为折叠显示事件创建一个处理程序，该事件在任何面板显示之前发生。 使用此选项可确保在显示所选的一个面板之前关闭任何其他打开的面板（请参阅此多个面板打开的答案 ）。 您还只希望在面板处于活动状态时执行代码。 要做到这一切，请添加以下代码：
$('#accordion').on('show.bs.collapse', function () { if (active) $('#accordion .in').collapse('hide'); });
然后使用show和hide切换每个面板和data-toggle切换的可见性以启用和禁用控件。
$('#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'); } });
在jsFiddle中工作演示
无论出于何种原因$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'}); 似乎只是第一次工作，它只能扩展可折叠。 （我尝试从扩展的可折叠开始，它不会崩溃。）
它可能只是在您第一次使用这些参数初始化折叠时运行的东西。
使用show和hide方法你会有更多的运气。
这是一个例子：
$(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('hide'); $(this).html('Click to disable accordion behavior'); } else { $active = false; $('.panel-collapse').collapse('show'); $('.panel-title > a').attr('data-toggle',''); $(this).html('Click to enable accordion behavior'); } }); });
更新
当然， KyleMit似乎有更好的处理方式。 他的回答和理解给我留下了深刻的印象。
我不明白发生了什么，或者为什么show似乎在某些地方翻转。
但经过一段时间的搞乱……最后带来了以下解决方案：
$(function() { var transition = false; var $active = true; $('.panel-title > a').click(function(e) { e.preventDefault(); }); $('#accordion').on('show.bs.collapse',function(){ if($active){ $('#accordion .in').collapse('hide'); } }); $('#accordion').on('hidden.bs.collapse',function(){ if(transition){ transition = false; $('.panel-collapse').collapse('show'); } }); $('.collapse-init').on('click', function() { $('.collapse-init').prop('disabled','true'); if(!$active) { $active = true; $('.panel-title > a').attr('data-toggle', 'collapse'); $('.panel-collapse').collapse('hide'); $(this).html('Click to disable accordion behavior'); } else { $active = false; if($('.panel-collapse.in').length){ transition = true; $('.panel-collapse.in').collapse('hide'); } else{ $('.panel-collapse').collapse('show'); } $('.panel-title > a').attr('data-toggle',''); $(this).html('Click to enable accordion behavior'); } setTimeout(function(){ $('.collapse-init').prop('disabled',''); },800); }); });
为了在想要使用“隐藏”和“显示”等function时保持手风琴的性质完整，例如.collapse( 'hide' ) ，你必须在进行任何调用之前使用toggle: false初始化具有在对象中设置的父属性的可折叠面板’隐藏’或’显示’
// initialize collapsible panels $('#accordion .collapse').collapse({ toggle: false, parent: '#accordion' }); // show panel one (will collapse others in accordion) $( '#collapseOne' ).collapse( 'show' ); // show panel two (will collapse others in accordion) $( '#collapseTwo' ).collapse( 'show' ); // hide panel two (will not collapse/expand others in accordion) $( '#collapseTwo' ).collapse( 'hide' );
最好的和经过测试的解决方案是放置以下小片段，它会折叠已加载时已打开的折叠式选项卡。 在我的情况下，最后一个第六个选项卡是打开的，所以我在页面加载时折叠了。
$(document).ready(){ $('#collapseSix').collapse("hide"); }