Bootstrap 2.3.2折叠不会自动折叠上一个面板

lyr7nygr 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(183)

我在我的网站上使用了Bootstrap Accordion功能来处理一些不同的指令列表，并最小化所占用的空间。它工作得很好，除了当点击一个新的面板时，它不会折叠以前的面板。
这是我的代码。有什么原因使它不能自动折叠吗？我特意在那里设置了.in类，因为我确实希望在默认情况下打开最上面的项。

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                <h3>Title of instructions</h3>
            </a>
        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <ol>
                    <li>some stuff</li>
                    <li>some more stuff</li>
                </ol>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                <h3>Another List of Instructions</h3>
            </a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div class="accordion-inner">
                Click the &ldquo;Make a One-time Pledge&rdquo; button
                <ol>
                    <li>some stuff</li>
                    <li>some more stuff</li>
                </ol>
            </div>
        </div>
    </div>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/22568032/bootstrap-2-3-2-collapse-isnt-auto-collapsing-previous-panel

2条答案

按热度按时间

sd2nnvve1#

这样更好：HTML

<div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a>Collapsible Group Item Title</a>
                </h4>
            </div>
            <div class="panel-collapse collapse in">
                <div class="panel-body">
                    A body of panel
                </div>
            </div>
        </div>

有点css：

<style>
        .panel-heading a:after {
            font-family: 'Glyphicons Halflings';
            content: "\e080";
            float: right;
            color: grey;
        }

        .panel-heading {
            cursor: pointer;
        }

        .panel-collapse {
            display: none;
        }
    </style>

和较少行J：

<script>
        $(document).ready(function () {
            $(".panel-heading").click(function () {
                // auto collapse all
                $(this).parent().parent().find(".panel-collapse").hide();
                // toggle current
                $(this).parent().find(".panel-collapse").toggle();
            })
        });
    </script>

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

cngwdvgl2#

我遇到了同样的问题，正如this answer所建议的，我从bootstrap.min.js的顶部检查了我的Bootstrap版本。结果我运行的是3.3.4版本，而不是2.3.2版本。按照3.3.4的文档， accordion 现在可以工作了！

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