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()因為這樣可以防止顯示輔助菜單。