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

你走了。这只是一个示例，我试图在不改变大部分代码的情况下尽可能简单。我在你的选择器中使用>来精确指向它的第一个子节点并stop()来停止动画并清除动画队列，这样它就不会一次又一次地重复动画。

<强>更新你再来一次当你快速将它悬停在它上面时，动画仍会闪烁（我希望你能解决它）。我正在使用stop()来停止动画并清除动画队列，因此它不会一次又一次地重复动画。您可以移除停止并尝试多次在菜单上方悬停，您将看到结果。

$(function(){
    $('nav  ul  li').hover(function(e){
         $(this).find('ul:eq(0)').stop(true, true).slideDown();
    },function(){
 	  $(this).find('ul:eq(0)').stop(true, true).slideUp();
    });
})

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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>
</nav>

但是我应该说有很多其他jquery插件可供多层菜单检查出来。有些完全是使用CSS完成的。

Answer 2

请检查fiddle上的更新代码您在向上滑动下拉代码问题和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;}

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

2 个答案: