$(this).find (':nth-child(2)' 上的 jquery 选择器混合)

Question

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

在此网站上http://pelloponisos.telesto.gr/我正在建立一个主菜单。我想要的只是使直接子菜单(主菜单中每个 li 的第二个子菜单)在鼠标悬停时显示并在鼠标移开时隐藏。

使菜单在鼠标悬停时工作的 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();
});