Question

我需要创建一个bootstrap手风琴。下面的标记工作正常，但它不会自动折叠以前打开的元素。例如，打开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>

Answer 1

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

即可

Answer 2

对于后人，我刚刚发现的另一个原因是，如果.panel元素不是手风琴的直接子元素（.panel-group元素），那么会阻止手风琴面板自动折叠。我已将我的面板内容整理到我div内的.panel-group内，手风琴并不是那样。

Answer 3

我遇到了相同的行为，我删除了bootstrap过渡模块并且它工作正常。还修复了消失的弹出窗口的问题。

Answer 4

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

Bootstrap：Accordion不会自动折叠先前打开的面板

4 个答案: