我有一个带有多个子菜单的水平菜单。如果已切换一个子菜单并尝试打开另一个子菜单,则第一个子菜单将关闭,而另一个子菜单将打开。
我设法做到了,但是它们不能同时打开/关闭。而是先打开一个新的-然后关闭另一个。
您可以在此处查看完整的代码: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