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

Question

希望这是一个小的。

我有一个三级垂直菜单。它是内置在 wordpress 中的，在我开始输入内容等之前，我试图让它保持简单。

我有子菜单要隐藏，当您单击 1 级按钮时，2 级菜单将向下滑动或滑动关闭 (slideToggle)。我的问题是，当您单击第三级时，第二级（父级）向上滑动，第三级同时向下滑动。当你再次点击第二层时，它会显示第二层和第三层，因为它仍然是打开的。

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

所以据我所见，它是进入下滑，下滑离开。然后进入上滑，上滑再退出。这很令人困惑，因为它是一个 if else。怎么能两者兼得呢？？？

如果有人感兴趣的话，我已经把它放在代码笔里了。 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;
}

Answer 1

您的 .menu-item-has-children class 已分配给 <li>。这意味着该特定 <li> 中的 .sub-menu 包含在其中，当您单击 "button 3.4" 时，<li> 即 "Button 3.4" 和 "Button 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 二级向上滑动，三级向下滑动

jquery level two slides up and level three slides down

css

jquery

menu

slidetoggle