Question

我不确定是什么问题，因为这与bootstrap网站非常相似

一旦点击了第一个元素（列表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/ 测试时，按下列表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

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

插件处于转换状态，正在等待转换结束，但由于元素的高度为0，转换从未开始且不会结束（我认为是这样）。当插件处于此状态时，插件不会执行任何操作。

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

您可以通过preventDefault()事件{/ 1>}上的show来停止此操作

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

（标记中还添加empty以找到空的手风琴体）

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

单击元素时引导崩溃中断

2 个答案: