Question

希望这是一个小的。

我有一个三级垂直菜单。它是用wordpress构建的，我试图在开始插入内容之前保持简单。

我已经隐藏了子菜单，当您单击1级按钮时，2级菜单将向下滑动或滑动关闭（slideToggle）。我的问题是，当您单击第三级时，第二级（父级）向上滑动，第三级同时向下滑动。再次单击第二级时，它会显示第二级和第三级，因为它仍处于打开状态。

我添加了console.log以检查发生了什么，它显示以下内容：进入下退出进入向上退出

所以从我看到的情况来看，它正在向下滑动，向下滑动并离开。然后它进入滑动，向上滑动然后退出。令人困惑，因为它是一个if else。它怎么能做到两个???

如果有人感兴趣，我已将它放在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;
}

Answer 1

您的.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>

jquery二级向上滑动，三级向下滑动

1 个答案: