Question

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

<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，当点击时，下拉两个李的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选择器）。

Answer 2

所以我也能够提出这个解决方案，但是当我在桌面和移动设备之间来回切换时需要进行一些调整。我还没有尝试过你的答案，但我会在周末。我肯定会摆脱孩子选择者...你的看起来更干净。感谢

$(".hasKids").on('click', function(){
            console.log($this);
            var submenu = $(".hasKids").find(">:nth-child(2)");
            if ($('.hasKids').find(">:first-child").hasClass("active")){
                submenu.removeClass();
                submenu.addClass("rd-mobilemenu_submenu");
                submenu.stop().slideDown();
            } else {
                submenu.removeClass("rd-mobilemenu_submenu");
                submenu.stop().slideUp();
                submenu.addClass("dropdown-menu");
            }
        })

jquery slideDown（）覆盖了最后一个元素

2 个答案: