0
希望这是一个小的。jquery level two slide up and level three slides down
我有一个三级垂直菜单。它是建立在WordPress的，我试图保持简单之前，我开始放入内容等。
我有隐藏子菜单，当你点击1级按钮时，2级菜单将滑下或滑动关闭（slideToggle）。我的问题是，当你点击第三级时，第二级（父级）向上滑动，第三级同时滑下。当你再次点击第二层时，它会显示第二层和第三层，因为它仍然是开放的。
我已经加入的console.log检查所发生的事情，并显示以下内容： 进入下 下来 出口下降 进入了 了 退出了
所以从我所看到的，它正在进入滑下来，滑下来，离开。然后它进入幻灯片，向上滑动，然后退出。这是令人困惑的，因为它是一个如果其他人。它如何做到这两点？
如果有人对此感兴趣，我已将它放在codepen中。 http://codepen.io/anon/pen/pJeevd
（点击按钮3，然后点击按钮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;
}
实际上，我认为这可以解释为什么它已被触发两次。只要你提到触发'li'和'a'，这一切都是有道理的。真的很感谢你的帮助，它非常有意义。再次感谢！ –