Bootstrap 手风琴在打开时不会折叠其他元素

Question

我尝试制作具有正常手风琴行为的手风琴：应该只有一个开放元素。我在这里发现了一个类似的问题：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 行为通过在可折叠 (.collapse) 元素上使用 data-parent 起作用。

引导程序 3

正如您在我的answer here 中看到的那样，“手风琴”行为必须满足两个条件..

• .panel 必须是用作 data-parent= 的元素的子元素
• 每个手风琴部分 (data-toggle=) 必须是孩子.panel

但是，您的 codepen 正在使用 Bootstrap 4，并且不再有 panel 类。现在card 类必须是父类的子类，所以它是..

<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

Answer 2

很确定你应该添加一个

data-target="#collapse0-0"

到a元素