jQuery Bootstrap 3 折叠手风琴：折叠所有作品，但无法在保持数据父级的同时展开所有作品
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20347553/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3 collapse accordion: collapse all works but then cannot expand all while maintaining data-parent
提问by cfx
I'm using Bootstrap 3 and trying to setup the following accordion/collapse structure:
我正在使用 Bootstrap 3 并尝试设置以下手风琴/折叠结构：
Onload: Each accordion panel in a group is fully collapsed and functions as documented/expected.
Button click: Each accordion panel expands and clicking the toggles has no effect (including URL anchor effects).
Another button click: All panels return to onload state; all collapsed and clickable as normal.
Onload：组中的每个手风琴面板都完全折叠并按文档/预期运行。
按钮单击：每个手风琴面板展开，单击切换按钮无效（包括 URL 锚点效果）。
另一个按钮点击：所有面板返回加载状态；全部折叠并可以正常点击。
I've made it to step 2, but when I click the button again at step 3 it has no effect. I also see no console errors reported in Chrome Dev Tools or by running the code through my local JSHint.
我已经完成了第 2 步，但是当我在第 3 步再次单击该按钮时，它没有任何效果。我也没有看到 Chrome Dev Tools 中报告的控制台错误或通过我的本地 JSHint 运行代码。
I'd like this cycle to be repeatable each time the button is clicked.
我希望每次单击按钮时都可以重复此循环。
I've setup my code here http://bootply.com/98140and here http://jsfiddle.net/A9vCx/
我在这里设置了我的代码http://bootply.com/98140和这里http://jsfiddle.net/A9vCx/
I'd love to know what I'm doing wrong and I appreciate suggestions. Thank you!
我很想知道我做错了什么，我很感激建议。谢谢！
My HTML:
我的 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>
My JS:
我的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');
}
});
});
回答by KyleMit
Updated Answer
更新答案
Trying to open multiple panels of a collapse control that is setup as an accordion i.e. with the data-parentattribute set, can prove quite problematic and buggy (see this question on multiple panels open after programmatically opening a panel)
尝试打开设置为手风琴的折叠控件的多个面板，即data-parent设置了属性，可能会出现很多问题和错误（请在以编程方式打开面板后打开多个面板上查看此问题）
Instead, the best approach would be to:
相反，最好的方法是：
- Allow each panel to toggle individually
- Then, enforce the accordion behavior manually where appropriate.
- 允许每个面板单独切换
- 然后，在适当的地方手动强制执行手风琴行为。
To allow each panel to toggle individually, on the data-toggle="collapse"element, set the data-targetattribute to the .collapsepanel ID selector (instead of setting the data-parentattribute to the parent control. You can read more about this in the question Modify Twitter Bootstrap collapse plugin to keep accordions open.
要允许每个面板单独切换，在data-toggle="collapse"元素上，将data-target属性设置为.collapse面板 ID 选择器（而不是将data-parent属性设置为父控件。您可以在问题Modify Twitter Bootstrap collapse plugin to keep Accordions open 中阅读更多相关信息。
Roughly, each panel should look like this:
粗略地说，每个面板应该是这样的：
<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>
To manually enforce the accordion behavior, you can create a handler for the collapse show event which occurs just before any panels are displayed. Use this to ensure any other open panels are closed before the selected one is shown (see this answer to multiple panels open). You'll also only want the code to execute when the panels are active. To do all that, add the following code:
要手动强制执行手风琴行为，您可以为在任何面板显示之前发生的折叠显示事件创建一个处理程序。使用此选项可确保在显示所选面板之前关闭任何其他打开的面板（请参阅此对多个面板打开的回答）。您还将只希望在面板处于活动状态时执行代码。为此，请添加以下代码：
$('#accordion').on('show.bs.collapse', function () {
if (active) $('#accordion .in').collapse('hide');
});
Then use showand hideto toggle the visibility of each of the panels and data-toggleto enable and disable the controls.
然后使用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');
}
});
Working demo in jsFiddle
jsFiddle 中的工作演示
回答by Trevor
For whatever reason $('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});only seems to work the first time and it only works to expand the collapsible. (I tried to start with a expanded collapsible and it wouldn't collapse.)
无论出于何种原因，$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});似乎只能在第一次使用，并且只能扩展可折叠组件。（我试图从一个展开的可折叠开始，它不会折叠。）
It could just be something that runs once the first time you initialize collapse with those parameters.
它可能只是在您第一次使用这些参数初始化折叠时运行一次的东西。
You will have more luck using the showand hidemethods.
使用show和hide方法，您将获得更多运气。
Here is an example:
下面是一个例子：
$(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');
}
});
});
Update
更新
Granted KyleMitseems to have a way better handle on this then me. I'm impressed with his answer and understanding.
授予KyleMit似乎比我更好地处理这个问题。我对他的回答和理解印象深刻。
I don't understand what's going on or why the showseemed to be toggling in some places.
我不明白发生了什么或为什么show在某些地方似乎在切换。
But After messing around for a while.. Finally came with the following solution:
但是折腾了一会后..终于有了以下解决方案：
$(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);
});
});
回答by mike
To keep the accordion nature intact when wanting to also use 'hide' and 'show' functions like .collapse( 'hide' ), you must initialize the collapsible panels with the parent property set in the object with toggle: falsebefore making any calls to 'hide' or 'show'
为了在想要使用 'hide' 和 'show' 等功能时保持手风琴性质不变.collapse( 'hide' )，您必须在toggle: false调用 'hide' 或 'show' 之前使用对象中设置的父属性初始化可折叠面板
// 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' );
回答by Sheryar Nizar
The best and tested solutionis to put the following small snippet which will collapse the accordion tab which is already open when you load. In my case the last sixth tab was open so I made it collapsed on page load.
在最佳和测试解决方案是把下面的小片段，这将崩溃手风琴标签这是当你加载已经打开。在我的情况下，最后的第六个选项卡是打开的，所以我让它在页面加载时折叠。
$(document).ready(){
$('#collapseSix').collapse("hide");
}
