jquery - 导航菜单上的 slideUp 不起作用

Question

我有这个菜单： http ://tabletest.orgfree.com/

我为此使用此功能：

function mainMenu(){
            (function($){

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

                //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();
                        //alert("this is an alert!");
                        });
                    }
                });
            })(jQuery);
            };

slideDown 效果很好，但 slideUp 不起作用，我不明白为什么，如果有人可以帮助我解决这个问题。

谢谢。

Answer 1

它在你的 CSS 中。菜单被放置在视野之外。删除 'left: -999em;' #nav li ul 的声明：

#nav li ul {
    position: absolute;
    left: -999em; <--- REMOVE THIS
    height: auto;
    width: 14.4em;
    font-weight: normal;
    margin: 0;
}

此外，将其从内联样式中删除：

<ul style="left:-999em" id="matrix">

看到它正常工作：http: //jsfiddle.net/c_kick/tsLPT/1/