jquery selector mixup on $（this）.find（'：nth-​​child（2）'）

Question

我对jquery和选择器有点困惑。

在这个网站http://pelloponisos.telesto.gr/我正在建立一个主菜单。 我想要的只是让鼠标悬停时出现直接子菜单（主菜单中每个li的第二个孩子）并隐藏在mouseout上。

使鼠标悬停菜单工作的jquery代码是：

$("#access ul li").mouseover(function(){
    $(this).find(':nth-child(2)').show();
    }).mouseout(function(){
        $(':nth-child(2)',this).hide();
    });

但正如您所看到的那样，代码可以匹配每个第二个孩子，从而立即扩展所有子菜单。

有人可以指出我错过了什么吗？

Answer 1

您可以尝试使用直接子选择器：

$(this).find('> :nth-child(2)').show();

或：

$("#access ul li").hover(function(){
    $('> :nth-child(2)', this).toggle();
});

Answer 2

试试这个

$(this).children(":eq(1)").show()