Jquery Animate子菜单但关闭其他子菜单同时打开

Question

我有一个包含多个子菜单的水平菜单。如果您切换了一个子菜单并尝试打开另一个子菜单，则第一个子菜单将关闭而另一个子菜单将打开。

我已设法做到这一点，但他们不会同时打开/关闭。相反，它首先打开新的 - 然后关闭另一个。

您可以在此处查看完整代码：Jsfiddle

相关的html：

<li> <a href="#" class="has-dropdown"><i class="fa fa-suitcase"></i> Dropdown</a>
    <ul class="dropdown">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li><a href="#">Separated link</a>
        </li>
    </ul>
</li>

相关的css：

.sidebar-nav li ul {
    max-height: 0;
    margin: 0;
    padding: 0;
    background: #F5F5F5;
    overflow: hidden;
    transition: all 0.5s ease-out;
}
.sidebar-nav li ul.show {
    max-height: 1000px;
    list-style: none;
    transition: all 0.5s ease-in;
}

相关JS：

$(".sidebar-nav .has-dropdown").on("click", function (e) {
    e.preventDefault();
    var dropdown = $(this).parent().find(".dropdown");

    if (!$(dropdown).hasClass("show")) {
        $(".dropdown").removeClass("show");
        $(dropdown).addClass("show");
    } else $(".dropdown").removeClass("show");

});

Answer 1

您要设置动画的属性为10,12,21,751 1,04,29,395 2,16,72,939 。但是，当您的下拉列表只有max-height时，您就会定义max-height: 1000px。您需要定义精确的250px或尽可能低，例如：

max-height

DEMO