Question

我已经阅读了几个关于此问题的帖子，但我找不到解决方案。

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

$("#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');
            }
        );

FIDDLE DEMO

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()，因为这会阻止显示辅助菜单。

Jquery +选择菜单的第一个ul

4 个答案: