如何在jQuery中只显示菜单的子菜单？

Question

我有几个类menu-item。当我将鼠标移到menu-item上时，子菜单始终显示。 但是，正如我们所见，sub-menu仅在id=menu-item-2292。

<ul class="menu" id="menu-menu-principal"> 
    <li class="menu-item" id="menu-item-2289"><a href="/about">À propos</a></li> 
    <li class="menu-item" id="menu-item-2292"> 
     <a href="/photos">Photos</a> 
     <ul class="sub-menu"> 
     <li class="menu-item" id="menu-item-2296"><a href="/portrait">Portrait</a></li> 
     </ul> 
    </li> 
</ul> 

我怎样才能做到这显示sub-menu只有menu-item有sub-menu？

Answer 1

$('.menu-item').hover(function(){ 
    var submenu = $(this).find('.sub-menu'); 
    if (submenu.length != 0) { 
    submenu.show(); 
    } 
}, function(){ 
    $(this).find('.sub-menu').hide(); 
}); 

Answer 2

可以使用has()选择减少选定的组li含ul

$(".menu-item").has('ul.sub-menu').hover(function() { 
    $('.sub-menu', this).show(); 
}, function() { 
    $('.sub-menu', this).hide(); 
});