如何使用jQuery在悬停时找到子元素？

Question

我试图在悬停状态下创建菜单，我想使用jQuery滑动子菜单，我尝试使用下面的代码

ul{ text-align: center;}
li{ list-style: none; display: inline-block;}
a{ color:black; text-decoration: none; padding:15px; display: block;}
li ul{ position: absolute; background-color: aquamarine; position: absolute; width:100%; left:0; display: none;}
li ul li{ position: relative;}
li ul li ul{ background-color:black; padding:15px; width:300px;}
li ul li ul li{ border-bottom:1px solid #fff; display: block; text-align: left;}
li ul li ul li a{ display: block; color:#fff;}

还有我的菜单结构

<nav>
<ul>
    <li>
       <a href="#">Home_1</a>
       <ul>
           <li>
               <a href="#">2323</a>
               <ul>
                   <li><a href="#">sub-2</a></li>
                   <li><a href="#">sub-2</a></li>
               </ul>
            </li>
           <li><a href="#">2323</a></li>
           <li><a href="#">2323</a></li>
           <li><a href="#">2323</a></li>
       </ul> 
    </li>
    <li><a href="#">Home-2</a></li>
    <li><a href="#">Home-3</a></li>
</ul>

​

我有2层子菜单

$('nav li ul').addClass('sub-menu');
    $('nav ul li').hover(function(){
       if($(this).hasClass('active')==false){
           $('nav ul li').removeClass('active');
           $('.sub-menu').slideUp();
           $(this).addClass('active');
           $(this).parent().find('.sub-menu').slideDown();
       }else{
           $('nav ul li').removeClass('active');
           $('.sub-menu').slideUp();
       }
    });

我的问题是下滑不能正常工作，您能告诉我上面jquery代码中的错误是什么吗？

Answer 1

请检查小提琴上的更新代码，您在幻灯片上有问题，滑下代码问题和addClass removeClass逻辑。

Html:-

<nav>
<ul>
    <li>
       <a href="#">Home_1</a>
       <ul>
           <li class="innerNavBar">
               <a href="#">2323</a>
               <ul class="sub-menu2">
                   <li><a href="#">sub-2</a></li>
                   <li><a href="#">sub-2</a></li>
               </ul>
            </li>
           <li><a href="#">2323</a></li>
           <li><a href="#">2323</a></li>
           <li><a href="#">2323</a></li>
       </ul> 
    </li>
    <li><a href="#">Home-2</a></li>
    <li><a href="#">Home-3</a></li>
</ul>

Jquery:-

$(this).parent().find('.sub-menu').slideUp();
   }else{
    $(this).addClass('active');
       $('.sub-menu').slideDown();
       $(this).parent().find('.sub-menu').slideDown();  
   }
   }
});

$('.innerNavBar').hover(function(){
   if($($(this).children()).hasClass('sub-menu2')){
   if($(this).hasClass('active')){
       $(this).removeClass('active');
       $('.sub-menu').slideUp();
       $(this).parent().find('.sub-menu2').slideUp();
   }else{
    $(this).addClass('active');
       $('.sub-menu2').slideDown();
       $(this).parent().find('.sub-menu2').slideDown();  
   }
   }
});Css:-

ul{ text-align: center;}
li{ list-style: none; display: inline-block;}
a{ color:black; text-decoration: none; padding:15px; display: block;}
li ul{ position: absolute; background-color: aquamarine; position: absolute; width:100%; left:0; display: none;}
li ul li{ position: relative;}
li ul li ul{ background-color:black; padding:15px; width:300px;}
li ul li ul li{ border-bottom:1px solid #fff; display: block; text-align: left;}
li ul li ul li a{ display: block; color:#fff;}