Как отобразить только подменю меню в 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();
});