12

我需要创建一个引导手风琴。下面的标记工作正常，但它不会自动折叠先前打开的元素。例如，打开 panel1，然后单击 panel2.. panel1 应该会自动关闭，但它不会。我曾尝试从引导站点 (http://twitter.github.com/bootstrap/javascript.html#collapse) 完全复制标记，但它不起作用。我错过了什么？

<h3>ACCORDION DEMO</h3>
<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel1">Panel 1</a>
        </div>
        <div class="accordion-body collapse" id="panel1">
            <div class="accordion-inner">
                <p>This is accordion panel 1 content</p>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="accordion1" data-toggle="collapse" href="#panel2">Panel 2</a>
        </div>
        <div class="accordion-body collapse" id="panel2">
            <div class="accordion-inner">
                <p>This is accordion panel 2 content</p>
            </div>
        </div>
    </div>
</div>
4

4 回答 4

28

只需替换data-parent="accordion1"为data-parent="#accordion1"

于 2012-07-25T12:03:46.563 回答
10

对于后代，我刚刚发现可以防止手风琴面板自动折叠的另一个原因是，如果.panel元素不是手风琴（.panel-group元素）的直接子元素。我将面板内容包装div在我的内部.panel-group，而手风琴不喜欢这样。

于 2015-02-13T18:34:48.153 回答
0

我遇到了同样的行为，我删除了引导转换模块并且它起作用了。还修复了弹出框消失的问题。

于 2014-10-30T09:01:56.653 回答
-3

我遇到了同样的问题，并根据预感做了一些改变。它奏效了，现在我想分享我的发现，以防它对某人有帮助。我在多个页面上使用手风琴折叠功能，这使得它们行为奇怪.. 为不同的面板提供独特的 href 和面板 ID 有所帮助。

于 2016-08-06T16:27:34.587 回答