Bootstrap 启动程序折叠面板在打开一个元素时不会折叠其他元素

3gtaxfhh 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(3)|浏览(273)

我试着做一个具有正常 accordion 行为的 accordion ：应该只有一个打开元素。2我在这里发现了一个类似问题：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"匹配，但为什么它没有关闭？

twitter-bootstrap

来源：https://stackoverflow.com/questions/43725491/bootstrap-accordion-wont-collapse-other-elements-when-one-is-opened

3条答案

按热度按时间

pwuypxnk1#

引导程序4更新

折叠式行为通过在可折叠（.collapse）元素上使用data-parent来工作。

引导程序3

正如您在我的回答中所看到的，“ accordion ”行为要起作用，必须满足两个条件。

.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

赞(0）回复(0）举报 2022-12-07

vltsax252#

很确定您应该添加一个