jquery中显示的子菜单答案

【问题标题】：Submenu displaying in jqueryjquery中显示的子菜单
【发布时间】：2013-01-30 08:14:46
【问题描述】：

这是测试站点链接。我遇到了显示子菜单的问题 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);

【问题讨论】：

请贴一些代码（但不是全部）
我添加了js的代码和测试链接

标签： jquery html css drop-down-menu submenu

【解决方案1】：

您应该使用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();
        });

【讨论】：