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

【问题标题】：Bootstrap 2.3.2 collapse isn't auto collapsing previous panelBootstrap 2.3.2 折叠不会自动折叠上一个面板
【发布时间】：2014-04-29 08:49:31
【问题描述】：

我在我的网站上使用 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 jquery-plugins collapse

【解决方案1】：

这样更好： 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>

还有几行js：

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

【讨论】：

【解决方案2】：

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

【讨论】：