twitter-bootstrap - Bootstrap Accordion 在打开时不会折叠其他元素

Question

我尝试制作具有正常 Accordion 行为的 Accordion :应该只有一个开放元素。我在这里发现了一个类似的问题:Collapse plugin: Only show one panel at a time ，但该解决方案不适合我，因为我匹配 data-parent="#pricing-list-0与 id="#pricing-list-0"在父元素中。

这是代码

    <div class="panel-group" id="pricing-list-0">
    <ul class="list-group">

        <li class="list-group-item">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#pricing-list-0" href="#collapse0-0" class="" aria-expanded="true">
                            Artful &amp; responsive website, ...
                        </a>
                    </h4>
                </div>
            </div>
            <div id="collapse0-0" class="panel-collapse collapse in" aria-expanded="true">
              <div class="panel-body">You give us the freedom ...</div>
            </div>                            
        </li>
[...]

Codepen 在这里:https://codepen.io/lafisrap/pen/YVVbev

为什么它没有关闭，虽然data-parent="#pricing-list-0"和 id="pricing-list-0"匹配吗？

Answer 1

Bootstrap 4 更新

Accordion 行为通过使用 data-parent 起作用。在可折叠 (.collapse) 元素上。

Bootstrap 3

正如您在我的 answer here 中看到的那样，必须满足两个条件才能使“ Accordion ”行为起作用..

.panel必须是用作 data-parent= 的元素的子元素

每个 Accordion 部分 (data-toggle= ) 必须是子级 .panel

但是，您的 codepen 正在使用 Bootstrap 4，并且不再有 panel类(class)。现在card类必须是 parent 的 child ，所以它会是..

<div class="panel-group" id="pricing-list-0">
     <ul class="list-group">
     <li class="list-group-item card">
       ...
     </li>
     </ul>
</div>

http://www.codeply.com/go/YGff3ecNvF