我有一个带有多个子菜单的水平菜单。如果已切换一个子菜单并尝试打开另一个子菜单,则第一个子菜单将关闭,而另一个子菜单将打开。

我设法做到了,但是它们不能同时打开/关闭。而是先打开一个新的-然后关闭另一个。

您可以在此处查看完整的代码: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");

});

最佳答案

您要设置动画的属性是max-height。但是,当下拉列表中只有max-height: 1000px时,您正在定义250px。您需要定义一个精确的max-height或尽可能低的值,例如:

.sidebar-nav li ul.show {
    max-height: 250px;
}


DEMO

10-08 03:56
查看更多