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

很确定你应该添加一个

data-target="#collapse0-0"

到a元素

Answer 2

Bootstrap 4次更新

手风琴行为通过在可折叠 (.collapse) 元素上使用 data-parent 来实现。

Bootstrap 3

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

.panel 必须是用作 data-parent=
每个手风琴部分 (data-toggle=) 必须是 child .panel

但是，您的代码笔正在使用 Bootstrap 4，并且不再有 panel class。现在 card class 必须是 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

Answer 3

在我的例子中，我省略了 data-target 元素开头的 #。

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

Bootstrap accordion won't collapse other elements when one is opened

accordion

collapse

twitter-bootstrap