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();
});

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

2 个答案: