Question

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

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

Answer 2

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

Bootstrap 2.3.2崩溃不是自动折叠前面板

2 个答案: