jquery下拉菜单双下拉列表

Question

我有一个jquery下拉菜单，它的效果很好。 只有1个问题它幻灯片2个元素，但我只想要下拉我悬停的元素。

链接到网站：HERE

jQuery的

$(document).ready(function() { 

     $('.sub_menu').hide(); //hiding the element 

     $('.trigger').mouseenter(function() { 
      $('.sub_menu').slideDown(350); 
     }).mouseleave(function() { 
      $('.sub_menu').slideUp(350); 
     }); 
}); 

HTML

<div id="nav"> 
      <ul class="main_menu"> 
       <li><a href="#">Home</a></li> 
       <li class="trigger"> 
        <a href="#">Hypotheken</a> 
        <ul class="sub_menu"> 
         <li><a href="#">Hypotheekvormen</a></li> 
         <li><a href="#">Hyporheek rente</a></li> 
         <li><a href="#">Nationale hypotheek garantie</a></li> 
        </ul> 
        <div class="clear"></div>      
       </li> 
       <li><a href="#">Verzekeringen</a></li> 
       <li class="trigger"> 
        <a href="#">Downloads</a> 
        <ul class="sub_menu"> 
         <li><a href="#">Hypotheekvormen</a></li> 
         <li><a href="#">Hyporheek rente</a></li> 
         <li><a href="#">Nationale hypotheek garantie</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div><!-- nav --> 

Answer 1

试试这个

$(document).ready(function() { 

     $('.sub_menu').hide(); //hiding the element 

     $('.trigger').mouseenter(function() { 
      $(this).children('.sub_menu').slideDown(350); 
     }).mouseleave(function() { 
      $(this).children('.sub_menu').slideUp(350); 
     }); 
}); 

在你的代码，当你在一个菜单移动鼠标item所有具有类.sub_menu的元素都被选中并进行动画处理。但你只需要当前的孩子。