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

Question

我有几个类 menu-item。当我将鼠标悬停在 menu-item 上时，子菜单始终显示。但正如我们所见，子菜单仅在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();
});