Question

我创建了一个简单的jQuery菜单，可以在悬停时进行扩展，但是除非用户将鼠标悬停在另一个菜单项上或点击页面中的其他位置，否则菜单项不会被隐藏。当您使用菜单上的链接加载另一个页面时，页面将打开并保持菜单展开。我怎样才能解决这个问题？可以找到所有html和css的小提琴here。我的jQuery代码在这里

                $(document).ready(function(){

                    $("#header_nav > li ").addClass("level1");
                    $("#header_nav  > li > ul > li ").addClass("level2");
                    $("#header_nav  > li > ul > li > ul > li ").addClass("level3");

                    $(".level1").live("hover",function(){

                        $(".level1").removeClass("main_menu_hover");
                        $(this).addClass("main_menu_hover");


                        var numberofChildren = $(this).find("> ul").children().length;

                        if(numberofChildren != 0){
                            // Section 1
                            $(".level1").removeClass("active_main_menu");
                            $(this).addClass("active_main_menu");

                            // Section 2
                            $(".level1").find("ul").css("display","none");
                            $(this).find(" > ul").css("display","block");

                            // Section 3
                            $(".level2").removeClass("active_first_element");
                            $(".level2").removeClass("active_last_element");
                            $(".level2").removeClass("active_only_element");

                            // Section 4
                            if(numberofChildren == 1){
                                $(this).find("ul li:first").addClass("active_only_element");
                            }else{
                                $(this).find("ul li:first").addClass("active_first_element");
                                $(this).find("ul li:last-child").addClass("active_last_element");
                            }

                            // Section 5
                            $(".level2 a").removeClass("sub_active");
                            $(".level2").removeClass("menu_hover");


                        }else{
                            // Section 6
                            $(".level1").find("ul").css("display","none");
                            $(".level1").removeClass("active_main_menu");

                        }

                    });

                    $(".level2").find(".arrow-right").attr("href","javascript:void(0);");

                    $(".level2 > a").live("hover",function(e){
                        $("li").removeClass("menu_hover");
                        $(this).parent().addClass("menu_hover");
                        e.preventDefault();
                    });

                    $(".level2 a").live("click",function(){
                        $("li").removeClass("menu_hover");

                        if($(this).hasClass("sub_active")){
                            $(this).removeClass("sub_active");
                            $(".level2 > ul").slideUp();
                        }else{
                            $(".level2 ul").slideUp();
                            $(".level2 a").removeClass("sub_active");
                            $(this).addClass("sub_active");
                            $(this).parent().find("ul").slideDown();
                        }
                    });





                    $(".level3 a").live("hover",function(){
                        if(!($(this).parent().hasClass("accordian_element_hover"))){
                            $(this).parent().removeClass("level3").addClass("accordian_element_hover");
                        }
                    });
                    $(".accordian_element_hover a").live("hover",function(){
                        $(this).parent().addClass("level3").removeClass("accordian_element_hover");
                    });


                });

Answer 1

您可以尝试这样的事情：

$(".level1").live("mouseover mouseout", function(event) {
    if (event.type == 'mouseover') {
            //Your old menu code
    } else {
        $(this).attr("class","level1");
        $(this).find("ul").hide();
    }
});

Answer 2

点击链接时，以下内容应隐藏所有菜单：

$('#mainmenucontainer a').click(function(){
    $(".level1").find("ul").css("display", "none");
    $(".level1").removeClass("active_main_menu");
});

我的JQuery CSS菜单无法隐藏

2 个答案: