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更新

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

Bootstrap 3

正如您在answer here中所看到的，＆＃34;手风琴＆＃34;必须满足2个条件。行为......

.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"

到元素

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

2 个答案: