Bootstrap手风琴只能自动折叠一个面板

Question

在过去的两个小时里,我一直在摸不着头脑.我有一个带两个面板的手风琴.我希望默认情况下扩展第一个面板.单击折叠面板的标题时,我希望该面板展开,另一个面板折叠.它仅适用于第二个面板的某些情况.

这是一个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.

Answer 1

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

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

请参阅小提琴:http://jsfiddle.net/nicos/JKqGc/