单击元素时引导崩溃中断

Question

我不确定出了什么问题，因为这与引导网站中的非常相似

单击第一个元素（列表 A）后，它几乎会中断。其他元素都可以，但是一旦单击列表 A，它就会中断。

<div class="accordion" id="notification_types">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#a">List A</a>
        </div>

        <div class="accordion-body collapse" id="a" style="height: 0px;">
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#b">List B</a>
        </div>

        <div class="accordion-body collapse" id="b" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a123">
                <a data-method="get" data-remote="true" href="/123">123</a>
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#c">List C</a>
        </div>

        <div class="accordion-body collapse" id="c" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a456">
                <a data-method="get" data-remote="true" href="/456">456</a>
            </div>
        </div>
    </div>
</div>

我在 jsfiddle 中做了一个例子 - http://jsfiddle.net/uycBa/157/ 测试时，先按List B或C，因为按A会破坏整个事情...

这里有什么问题？

Answer 1

将 div 添加到第一个手风琴主体有效。找不到原因。

<div class="accordion" id="notification_types">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#a">List A</a>
        </div>

        <div class="accordion-body collapse" id="a" style="height: 0px;">
           <div class="accordion-inner">  
           </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#b">List B</a>
        </div>

        <div class="accordion-body collapse" id="b" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a123">
                <a data-method="get" data-remote="true" href="/123">123</a>
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#c">List C</a>
        </div>

        <div class="accordion-body collapse" id="c" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a456">
                <a data-method="get" data-remote="true" href="/456">456</a>
            </div>
        </div>
    </div>
</div>

Answer 2

已知错误：https://github.com/twitter/bootstrap/issues/5849

---

过渡阻止了插件，因为您的第一个可折叠没有高度：

插件处于transitioning状态，正在等待过渡结束，但由于元素高度为0，过渡从未开始也不会结束（我想是这样） .处于这种状态时，插件不会做任何事情。

如果您停用转换，您可以看到它：http://jsfiddle.net/Sherbrow/uycBa/158/

---

您可以通过在 show 事件上调用 preventDefault() 来停止此操作：

$('.accordion-body.empty').on('show', function(event) {
    event.preventDefault();
});

（empty 也被添加到标记中以定位空手风琴体）

演示：http://jsfiddle.net/Sherbrow/uycBa/159/