javascript - jquery slideDown() 覆盖最后一个元素

Question

我正在尝试在我的移动模式下滑动子菜单下拉菜单。我似乎无法将最后一个元素推开。现在它正在扩展当前选择器上的两里。

<li class="dropdown">
  <a href="#">Solutions</a>  
  <ul class="dropdown-menu">
    <li><a href="#">ERP</a></li>
    <li><a href="#">Module</a></li>
    <li><a href="#">WMS</a></li>
    <li><a href="#">Sales Tax </a></li>
    <li class="dropdown hasKids">
      <a href="#" class="rd-with-ul">Websites &nbsp;<b class="caret-right"></b><span class="rd-submenu-toggle"></span></a>
      <ul class="dropdown-menu websiteClasses">
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
      </ul>
    </li>
  </ul>
</li>
<li><a href="contactUs.html" class="mobileFont">Contact</a></li>


$(".hasKids").on('click', function(){
  $(this).find(">:first-child").toggleClass('active');
})
$(".hasKids").on('click', function(){
  if ($('.hasKids').find(">:first-child").hasClass("active")){
    console.log('active');
    var submenu = $(".hasKids").find(">:nth-child(2)");
    submenu.slideDown();
  } else {
    console.log('not active');
 }
})

所以我只需要 hasKids 下拉列表，当单击时，下拉两个 li 的 A 和 B 并将“联系我们”推开。当再次点击 hasKids 时，下拉菜单会向上滑动。谢谢

Answer 1

请检查这是否是您需要的:

$(".hasKids").on('click', function(){
    $(this).children("a").toggleClass('active');
    var submenu = $(this).children(".dropdown-menu");
    if ($(this).children("a").hasClass("active")){
      console.log('active');     
      submenu.slideDown();
    } else {
      console.log('not active');
      submenu.slideUp();
   }
});

我合并了两个事件处理程序并稍微更改了选择器以依赖于类和标签而不是位置(使用 >:first-child 和 >:nth-child选择器)。