折叠同级导致“卡顿”

Question

我有一个侧边栏菜单，里面有多个带有类折叠的li。

<ul>
    <li>
        <a href="javascript:;" data-toggle="collapse" data-target="#Management"><i class="fa fa-fw fa-cogs"></i> Company Management <i class="fa fa-fw fa-caret-down"></i></a>
            <ul id="Management" class="collapse">
                <li>
                    <a href="#">Management Home</a>
                </li>
                <li>
                    <a href="#">Employees</a>
                </li>
                <li>
                    <a href="#">Locations</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="javascript:;" data-toggle="collapse" data-target="#Accounting"><i class="fa fa-fw fa-dollar"></i> Accounting <i class="fa fa-fw fa-caret-down"></i></a>
            <ul id="Accounting" class="collapse">
                <li>
                    <a href="#">Pay Current Invoice</a>
                </li>
                <li>
                    <a href="#">Search for Invoice</a>
                </li>
                <li>
                    <a href="#">Billing History</a>
                </li>
            </ul>

我使用下面的jquery代码：

$(function () {
            $(".collapse").hide();

            $("a").click(function () {
                $(".collapse").slideUp('fast');
                $(this).next(".collapse").slideDown("fast");
            });
        });

它工作得很好，然而，它创建了一个“卡顿”，这意味着它试图打开新的折叠，停止，关闭打开的折叠，然后显示新的打开的li。

有没有什么简单的东西是我为了避免这个卡顿步骤而遗漏的？

这是jquery的新手，因此我们非常感谢您的帮助。

Answer 1

不需要编写您自己的jQuery。但是，您确实需要添加data-parent属性，并且您的列表项上需要.panel类：

<ul id="topmenu">
    <li class="panel">
        <a data-toggle="collapse" data-parent="#topmenu" ... >

请注意，我已经应用了一些CSS来覆盖.panel获得的边距。为什么你最初的尝试很麻烦..。也许它与Bootstrap的collapse()方法发生了冲突。