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>

当我将鼠标悬停在页面链接上时，我希望子菜单显示为淡入淡出。这是我的代码到目前为止，但由于某种原因，它不起作用，我不认为这是实现这一目标的正确方法：

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

任何人都知道如何按照最佳标准达到我的目标，当我将鼠标悬停在页上时，会显示第二个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); }
);

Answer 2

nth-child选择器需要应用于<li>元素而不是<a>。

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

小提琴：http://jsfiddle.net/9u3V7/

Answer 3

检查这个小提琴：http://jsfiddle.net/vPLAc/3/

不需要那样计算孩子。每个带子菜单的列表项都会对此代码做出反应。

如何用jQuery找到父母的孩子？

3 个答案: