jquery - jQuery第二级幻灯片向上和第三级幻灯片向下

希望这是一个很小的。

我有一个三级垂直菜单。它是内置于wordpress中的，在尝试放入内容等之前，我试图使其保持简单。

我已经隐藏了子菜单，当您单击一级菜单按钮时，二级菜单将向下滑动或关闭（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;
}

最佳答案

您的.menu-item-has-children类已分配给<li>。这意味着其中包含了特定.sub-menu内的<li>，并且当您单击“按钮3.4”时，会触发<li>的即按钮“ 3.4”和“按钮3”，从而导致该效果。不知道我是否解释清楚。

一种解决方案是将.menu-item-has-children分配给<a>，然后将其父元素的find分配给.sub-menu，如下面的代码片段所示。

	$(".menu-item-has-children").click( function(event) {

	    var target = $(this).parent().find('> .sub-menu');

		if(target.is(':visible')) {

			console.log('enter up');

			target.slideUp(500);


			console.log('exit up');

		} else {

			console.log('enter down');

			target.slideDown(500);



			console.log('exit down');

		}

	});	

ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

.sub-menu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-header">

	<li id="menu-item-192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-192"><a class="menu-item-has-children">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-158"><a class="menu-item-has-children">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-202"><a class="menu-item-has-children">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-207"><a class="menu-item-has-children">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>