【发布时间】：2015-06-03 03:28:30
【问题描述】：
希望这是一个小的。
我有一个三层垂直菜单。它是内置在 wordpress 中的，在我开始输入内容之前，我会尽量保持简单。
我已经隐藏了子菜单，当您单击 1 级按钮时，2 级菜单将向下滑动或滑动关闭 (slideToggle)。我的问题是当您单击第三级时，第二级（父级）向上滑动，第三级同时向下滑动。当您再次单击第二级时，它会显示第二级和第三级，因为它仍处于打开状态。
我添加了 console.log 来检查正在发生的事情，它显示以下内容： 向下输入 下 退出 进入 向上 退出
所以据我所见，它正在进入滑梯，向下滑动并离开。然后它向上进入滑道，向上滑道，然后退出。这很令人困惑，因为它是一个 if else。怎么能两者兼得？？？
如果有人感兴趣，我已将其放入 codepen。 http://codepen.io/anon/pen/pJeevd
（点击Button 3，再点击Button 3.4查看三级效果） 任何想法都非常感谢。
HTML
<ul id="menu-header">
<li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-192"><a>Button 1</a>
<ul class="sub-menu">
<li id="menu-item-96" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-96"><a href="">Button 1.1</a></li>
<li id="menu-item-97" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-97"><a href="">Button 1.2</a></li>
</ul>
</li>
<li id="menu-item-158" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-158"><a>Button 2</a>
<ul class="sub-menu">
<li id="menu-item-159" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-159"><a href="">Button 2.1</a></li>
<li id="menu-item-160" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-160"><a href="">Button 2.2</a></li>
</ul>
</li>
<li id="menu-item-202" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-202"><a>Button 3</a>
<ul class="sub-menu">
<li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="">Button 3.1</a></li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><a href="">Button 3.2</a></li>
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="">Button 3.3</a></li>
<li id="menu-item-207" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-207"><a>Button 3.4</a>
<ul class="sub-menu">
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="">Button 3.4.1</a></li>
<li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-203"><a href="">Button 3.4.2</a></li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="">Button 4</a></li>
<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="">Button 5</a></li>
</ul>
jQuery
$(".menu-item-has-children").click( function(event) {
var target = $(this).find('> .sub-menu');
if(target.is(':visible')) {
console.log('enter up');
target.slideUp(500);
console.log('up');
console.log('exit up');
} else {
console.log('enter down');
target.slideDown(500);
console.log('down');
console.log('exit down');
}
});
CSS
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
.sub-menu {
display: none;
}
【问题讨论】：
标签： jquery css menu slidetoggle