javascript - 如何使用 jQuery 查找 parent 的 child ？

Question

我有一个看起来像这样的菜单:

<ul class="menu">
  <li><a href="#">zing</a></li>
  <li>
    <a href="#">page</a>
    <ul>
      <li>foo</li>
      <li>bar</li>
    </ul>
  </li>
</ul>

当我将鼠标悬停在 page 链接上时，我希望子菜单淡入。到目前为止，这是我的代码，但由于某种原因它无法正常工作，而且我认为这无论如何都不是实现此目的的正确方法:

$('.menu li a:nth-child(2)').hover(function(){
    $('.menu li ul').fadeIn(150);
}, function(){
    $('.menu li ul').fadeOut(150);
}); 

有谁知道当我将鼠标悬停在 page 上时，如何根据最佳标准实现我的目标，使第二个 li 的子菜单出现？

Answer 1

将悬停仅应用于具有子菜单的菜单可能是个好主意。你可以这样做:

$('.menu > li > a').filter(function(){
    if( $(this).siblings('ul').length ){ return true; }
}).hover(
    function(){ $(this).siblings('ul').fadeIn(150); }
    ,function(){ $(this).siblings('ul').fadeOut(150); }
);