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

【问题标题】：How to display only submenu of a menu in jQuery?如何在 jQuery 中只显示菜单的子菜单？
【发布时间】：2011-03-24 11:29:01
【问题描述】：

我有几个班级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？

【问题讨论】：

它是否总是具有子菜单的同一个菜单项，或者可以更改。如果是这样，您如何生成列表？

标签： jquery css wordpress class menu

【解决方案1】：

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

【讨论】：

你是个天才！这是完美的。谢谢你什里
哦不，抱歉，它不起作用。当我将鼠标移出menu-item 时，子菜单消失了...

【解决方案2】：

您可以使用has() 选择器将选定集减少为包含ul 的li

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

【讨论】：

是的，很好。但是现在，问题是：当我试图将鼠标悬停在sub-menu 上时，这个隐藏了......为什么？查看我的代码：$(".menu-item").has('ul.sub-menu').hover( function () { $('.sub-menu').show(); }, function () { $('.sub-menu').hide();} );
请发布您的 CSS 样式。您还应该将show() 和hide() 限制为this 中的元素。我更新了我的帖子