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。

- mellis481

---

这个小提琴的资源有问题。这是您的代码在另一个小提琴中的链接：http://jsfiddle.net/isherwood/MMxMn/2/ - isherwood

你的fiddle和我的不同之处似乎在于我使用的是jQuery 1.9.1。 - isherwood

Answer 1

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

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

请查看演示：http://jsfiddle.net/nicos/JKqGc/

- Panoply

---

虽然您在代码中发现了ID值不匹配的问题，但它似乎并不影响功能。http://jsfiddle.net/isherwood/47n94/3/ - isherwood

您的Fiddle中使用了jQuery 1.11. :-) - isherwood

这是您的v1.10版fiddle。它在Chrome或IE11中无法正常工作。http://jsfiddle.net/isherwood/JKqGc/1/ - isherwood

谢谢你！我最近才加入 Stack，尽我所能地帮助别人！ - Panoply

真是太惨了。一个愚蠢的打字错误！感谢另一双眼睛。 - mellis481

@Panoply可以帮我解决这个问题吗？https://stackoverflow.com/questions/50170352/one-open-panel-at-a-time-bootstrap4-accordion-in-angular4 - Nikson

Answer 2

试试这个

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

- Husain Al Faraj

Answer 3

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

在我们的情况下，问题出在HTML结构上，因为我们在foreach循环内部有一个

标签。解决方法是使用单个手风琴来管理所有面板。

- Ravi Teja Tata

Answer 4

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

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

- isherwood

---

在Chrome或IE11中对我无效。页面会像我点击了一个锚点一样抖动。 - isherwood