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> 

어떻게 menu-item가 sub-menu이있는 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

당신은 항상 ul

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