twitter-bootstrap Bootstrap 手风琴仅自动折叠一个面板
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23962600/
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 accordion only auto-collapsing one panel
提问by im1dermike
I've been scratching my head on this for the past 2 hours. I have an accordion with two panels. I want the first panel to be expanded by default. When the collapsed panel's header is clicked, I want that panel to expand and the other to collapse. It only works in certain situations for the second panel.
在过去的 2 个小时里，我一直在为此挠头。我有一个带有两个面板的手风琴。我希望第一个面板默认展开。单击折叠面板的标题时，我希望该面板展开而另一个面板折叠。它仅适用于第二个面板的某些情况。
Here is a JSFiddle.
这是一个JSFiddle。
Here is my markup:
这是我的标记：
<div id="proposalAccordian" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseContact">Contact</a>
</h4>
</div>
<div id="collapseContact" class="panel-collapse collapse in">
<div class="panel-body">
@Html.Partial("_ContactPanel")
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#proposalAccordion" href="#collapseProposal">Proposal</a>
</h4>
</div>
<div id="collapseProposal" class="panel-collapse collapse">
<div class="panel-body">
@Html.Partial("_ProposalPanel")
</div>
</div>
</div>
</div>
I'm using Bootstrap v3.1.1 and jQuery v1.10.4.
我正在使用 Bootstrap v3.1.1 和 jQuery v1.10.4。
回答by Panoply
You need to add data-parent="#proposalAccordian"
你需要添加 data-parent="#proposalAccordian"
<a data-toggle="collapse" data-parent="#proposalAccordian" href="#collapseProposal">Proposal</a>
See fiddle: http://jsfiddle.net/nicos/JKqGc/
回答by isherwood
Strangely, your code works on jQuery 1.9.x:
http://jsfiddle.net/isherwood/MMxMn/5
http://jsfiddle.net/isherwood/MMxMn/5
and 1.11.x:
http://jsfiddle.net/isherwood/MMxMn/4
http://jsfiddle.net/isherwood/MMxMn/4
but not 1.10.x:
http://jsfiddle.net/isherwood/MMxMn/8
http://jsfiddle.net/isherwood/MMxMn/8
Note that I've normalized the spelling of "accordion" to fix the accordion functionality.
请注意，我已经标准化了“accordion”的拼写以修复手风琴功能。
回答by Ravi Teja Tata
<div id="accordion" role="tablist" aria-multiselectable="true">
All panels inside this..
</div>
In our case, the problem was in HTML structure, as we had inside foreach loop. The fix is to use a single accordion for all the panels.
在我们的例子中，问题出在 HTML 结构中，就像我们在 foreach 循环中一样。解决方法是对所有面板使用单个手风琴。
回答by Husain Al Faraj
Try this
试试这个
var $collapse = $('.collapse');
$collapse.collapse().on('show.bs.collapse', function() {
$collapse.collapse('hide');
});
