1

我不确定出了什么问题，因为这与 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/ 测试时，之前按 List B 或 C，因为按 A 会破坏整个事情......

这里有什么问题？

4

2 回答 2

2

将 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>
于 2013-02-24T19:26:50.497 回答
1

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

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

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

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

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

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

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

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

于 2013-02-24T19:40:43.210 回答