Javascript 展开和折叠 bootstrap 手风琴
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37300386/
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
Expanding and Collapsing a bootstrap accordion
提问by Bohn
I have unknown number of accordion controls like this on my page that I generate the id for them at run time by looping through my results:
我的页面上有未知数量的像这样的手风琴控件，我在运行时通过循环遍历结果为它们生成 ID：
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
Live Demo of code above: http://www.bootply.com/jDrg0bMiiV
上面代码的现场演示：http: //www.bootply.com/jDrg0bMiiV
How can I collapse or expand them all by pressing a button ? ( for example a Collapse All button on the page and an Expand All button on the page.)
如何通过按下按钮折叠或展开它们？（例如页面上的“全部折叠”按钮和页面上的“全部展开”按钮。）
回答by Artur Filipiak
In your example, you just have to code two buttons using bootstrap collapse methods:
在您的示例中，您只需使用引导折叠方法编写两个按钮：
// SHOW BUTTON:
$("#collapse_show").click(function(e) {
$(".panel-collapse").collapse("show");
});
// HIDE BUTTON:
$("#collapse_hide").click(function(e) {
$(".panel-collapse").collapse("hide");
});
回答by gaetanoM
You may use collapse('toggle'):
您可以使用collapse('toggle')：
$(function () {
$('#toggleAccordions').on('click', function(e) {
$('.panel-collapse').collapse('toggle');
})
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button id="toggleAccordions">Collapse / Expand All</button>
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordionMessagesSetup1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup1" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordionMessagesSetup2">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup2" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>回答by Craveiro
Just make a part of the id static (id="collapsible") and then use a jQuery wildcard.
只需将 id 的一部分设为静态（id="collapsible"），然后使用 jQuery 通配符。
In your button you can do something like this $("id^=collapsable]").collapse('toggle');
在你的按钮中，你可以做这样的事情 $("id^=collapsable]").collapse('toggle');
This will match any id beggining with collapsible and toggle it.
这将匹配任何以可折叠开头的 id 并切换它。
回答by Rosh Donniet
I did just that on my current project. Here's how to do it in javascript :
我在我当前的项目中就是这样做的。以下是如何在 javascript 中执行此操作：
$("#your_button").click(function(event)
{
// if you use an hyperlink like I do
event.preventDefault();
$(this).blur();
var hideAll = true;
$(".panel-details").each(function()
{
if (!$(this).hasClass("in")) {
hideAll = false;
}
});
$(".panel-details").collapse(hideAll ? "hide" : "show");
});
The panel looks like this :
面板看起来像这样：
<div class='panel'>
<a data-parent='#accordion' data-toggle='collapse' href='#'>
<div class='panel-heading'>
<h4 class='panel-title'>
Panel title
</h4>
</div>
</a>
<div class="panel-details panel-collapse collapse <?=$firstPanel?'in':''?>">
<div class='panel-body'>Panel content</div>
</div>
</div>
