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" ... >

<强> deferred object API

请注意，我已经应用了一些CSS来覆盖.panel获得的边距。至于为什么你的原始尝试很麻烦...也许它与Bootstrap的collapse()方法相撞。

崩溃导致“口吃”的兄弟姐妹

1 个答案: