jQuery +选择菜单的第一个ul

Question

我已经阅读了有关此问题的几篇文章，但找不到解决方案。

我创建了一个包含3个级别的菜单。 我想在第二级和第三级显示鼠标悬停。 为此，我使用代码：

$("#header ul.menu li").hover(
    function(){
        $(this).find("ul").fadeTo('slow', 0.9);
    },
    function(){
        $(this).find("ul").fadeOut('slow');
    }
);

没关系，并且子菜单在第一级上带有悬停出现。

但是，如果我将鼠标悬停在第二层和第三层，则第一个ul的一些ul孩子会消失。

如何仅选择函数中的第一个ul？ 我尝试了几种方法，但没有成功：

$("#header ul.menu > li").hover(...

要么

$(this).children("ul")....

您能帮我解决这个问题吗？

多谢您的回覆。

Answer 1

您是否尝试过使用：eq伪选择器？ http://api.jquery.com/eq-selector/

您可以使用索引选择任何元素：

$('a:eq(0)')

上面的代码将返回页面上的第一个<a>元素。

Answer 2

我使用了以下方法，对我来说很好用。

  $("ul.menu > li").hover(
            function(){
                $(this).find("ul").fadeTo('slow', 0.9);
            },
            function(){
                $(this).find("ul").fadeOut('slow');
            }
        );

现场演示

Answer 3

我已经找到了解决方案，但可能并不干净。 使用JQuery，我在第一个ul.menu（nav）上添加了一个类。 然后我写这段代码：

            $(".menu-parent-wrapper > ul").addClass("nav");
            $("#header ul.nav > li").hover(
                function(){
                    $(this).find("ul").fadeTo('slow', 0.9);
                },
                function(){
                    $(this).find("ul").fadeOut('slow');
                }
            );

现在菜单可以了。 当我将鼠标悬停在第二层的项目上时，第三层不会消失。

如果您有其他解决方案，则可以发布新消息。

谢谢。

Answer 4

这个JSFiddle似乎可以满足您的要求。

我使用的是jQuery的children()而不是find()因为这样可以防止显示辅助菜单。