只在子菜單懸停上顯示子菜單的子菜單

Question

我想顯示懸停菜單上的子菜單。我已成功進入子菜單級別1.但是，當我進入子菜單級別2（即子菜單的子菜單）時，它不起作用。我只想在懸停1級子菜單時顯示2級子菜單。以下是我已經嘗試

<ul class="nav"> 
    <li><a href="#">Home</a> 
    </li> 
    <li><a href="#">About Us</a> 
     <ul class="submenu"> 
      <li><a href="#">Capabilities</a></li> 
      <li><a href="#">Approach</a></li> 
     </ul> 
    </li> 

    <li><a href="#">Careers</a> 
     <ul class="submenu"> 
      <li><a href="#">Working With Us</a></li> 
      <li><a href="#">Work Culture</a> 
       <ul> 
        <li><a href="#">Benefits</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Resources</a> 
    </li> 
    <li><a href="#">Contact Us</a> 
    </li> 
</ul> 

下面的代碼是jQuery的

$('ul.submenu').hide(); 
$('ul.nav > li').hover(function() { 
if ($(this).find('ul.submenu').length > 0) { 
    $(this).find('ul.submenu').stop().slideDown('slow'); 
} 
},function() { 
    if ($(this).find('ul.submenu').length > 0) { 
     $(this).find('ul.submenu').stop().slideUp('slow'); 
    } 
}); 

請找到小提琴這裏：http://jsfiddle.net/Midhun28/RbY83/1/

Answer 1

，據我瞭解，你想了slideDown在上空盤旋

<ul class="submenu"> 
    <li><a href="#">Working With Us</a></li> 
    <li><a href="#">Work Culture</a> 
     <ul class="submenu"> 
      <li><a href="#">Benefits</a></li> 
     </ul> 
    </li> 
</ul> 

列表項一級我添加的子類，我希望他們最初隱藏所有元素的子菜單。然後我做了jQuery代碼進行一些修改與所有子菜單的工作

$('ul.submenu').hide(); 
$('ul.nav > li, ul.submenu > li').hover(function() { 
if ($('> ul.submenu',this).length > 0) { 
    $('> ul.submenu',this).stop().slideDown('slow'); 
} 
},function() { 
    if ($('> ul.submenu',this).length > 0) { 
     $('> ul.submenu',this).stop().slideUp('slow'); 
    } 
}); 

希望這會爲你工作 看到http://jsfiddle.net/U7mqM/

Answer 2

使用mouseenter和mouseleave事件，如果你希望它們被觸發時，你懸停在子元素上。

$('.nav ul').hide(); 

$('.nav li').mouseenter(function() { 
    $(this).children('ul').stop().slideDown('slow') 
}).mouseleave(function() { 
    $(this).children('ul').stop().slideUp('slow') 
});