jquery - 子菜单显示在jQuery中

这是测试站点的链接。我遇到了显示子菜单的问题
link

当我将鼠标悬停在该导航栏中的“为什么是斯德哥尔摩”时，也会显示子菜单，当我将其悬停在其正常工作状态时，任何人都会误解。

(function($){

    //cache nav
    var nav = $("#topNav");

    //add indicator and hovers to submenu parents
    nav.find("li").each(function() {
        if ($(this).find("ul").length > 0) {
            $("<span>").text("").appendTo($(this).children(":first"));

            //show subnav on hover
            $(this).mouseenter(function() {
                $(this).find("ul").stop(true, true).slideDown();
            });

            //hide submenus on exit
            $(this).mouseleave(function() {
                $(this).find("ul").stop(true, true).slideUp();
            });
        }
    });
})(jQuery);

最佳答案

您应该使用children()而不是find()。使用find('ul')时，它将使用选择器中的所有ul。

Here is working jsFiddle.

        //show subnav on hover
        $(this).mouseenter(function() {
            $(this).children("ul").stop(true, true).slideDown();
        });

        //hide submenus on exit
        $(this).mouseleave(function() {
            $(this).children("ul").stop(true, true).slideUp();
        });

关于jquery - 子菜单显示在jQuery中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14594373/