Bootstrap 手风琴仅自动折叠一个面板答案

【问题标题】：Bootstrap accordion only auto-collapsing one panelBootstrap 手风琴仅自动折叠一个面板
【发布时间】：2014-07-20 16:27:48
【问题描述】：

在过去的 2 个小时里，我一直在摸索这个问题。我有一个有两个面板的手风琴。我希望默认情况下扩展第一个面板。单击折叠面板的标题时，我希望该面板展开而另一个折叠。它仅适用于第二个面板的某些情况。

这是JSFiddle。

这是我的标记：

<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>

我正在使用 Bootstrap v3.1.1 和 jQuery v1.10.4。

【问题讨论】：

小提琴的资源有问题。这是您在另一个小提琴中的代码：jsfiddle.net/isherwood/MMxMn/2
你和我的不同之处似乎在于我使用的是 jQuery 1.9.1。

标签： twitter-bootstrap twitter-bootstrap-3 accordion

【解决方案1】：

您需要添加data-parent="#proposalAccordian"

<a data-toggle="collapse" data-parent="#proposalAccordian"  href="#collapseProposal">Proposal</a>

见小提琴：http://jsfiddle.net/nicos/JKqGc/

【讨论】：

虽然您是正确的，因为代码中存在 ID 值不匹配，但它似乎不会影响功能。 jsfiddle.net/isherwood/47n94/3
您的小提琴中有 jQuery 1.11。 :-)
这是您对 v1.10 的修改。它在 Chrome 或 IE11 中不起作用。 jsfiddle.net/isherwood/JKqGc/1
谢谢你！我最近才加入 Stack，尽我所能提供帮助！
绝对残酷。一个愚蠢的错字！感谢另一双眼睛。

【解决方案2】：

Strangely, your code works on jQuery 1.9.x:

http://jsfiddle.net/isherwood/MMxMn/5

and 1.11.x:

http://jsfiddle.net/isherwood/MMxMn/4

but not 1.10.x:

http://jsfiddle.net/isherwood/MMxMn/8

请注意，我已经规范了“手风琴”的拼写以修复手风琴功能。

【讨论】：

在 Chrome 或 IE11 中不适合我。页面抖动，好像我点击了一个锚点。

【解决方案3】：

<div id="accordion" role="tablist" aria-multiselectable="true">
    All panels inside this..
</div>

在我们的例子中，问题出在 HTML 结构中，就像我们在 foreach 循环中一样。解决方法是对所有面板使用单个手风琴。

【讨论】：

【解决方案4】：

试试这个

var $collapse = $('.collapse');
$collapse.collapse().on('show.bs.collapse', function() {
    $collapse.collapse('hide');
});

【讨论】：