Question

当我将鼠标移出/删除顶部菜单中的另一个链接时，我需要使该子菜单显示出来，该怎么做？我不太了解jQuery，我实际上从stackoverflow中学到了很多。只是大家都知道：）

我试图使用鼠标悬停功能，但在鼠标悬停时还没有使它工作。我知道我需要找出当前位置的href，并在我离开鼠标时对其应用悬停类，但实际上并不知道如何编写它。这是jQuery代码：

$(document).ready(function() {

/*Adress för startsidan*/
var aktAdress = " ";
aktAdress = "http://localhost/2.612e0c6d167074c5746163.html";
/*Hover funktion för första sidan*/
if (location.href == aktAdress) {
    $(".nav div").hover(
        function() {
            $(this).addClass("hover");
        },
        function() {
            $(this).removeClass("hover");
        }
    );
    /*Toggleknapp funktion för visning av undermeny och
    ur fokusering ut för att dölja undermeny efter sista tab
    på sista länken*/
    $("button").click(function() {
        $(this).closest(".nav div").toggleClass("hover");
    });
    $("div.sub div.child:last-child").focusout(function() {
        $(".nav div").removeClass("hover");
    });

} else if (location.href != aktAdress);
/*Visar undermenyn som matchar toppmenylänken*/
$(".nav div [href]").each(function() {
    if (this.href == window.location.href) {
        $(this).parent().css({
            "background": "#d2d2d2",
            "color": "white"
        });
        $(this).parent().addClass("hover");
        $("div.sub div.child:last-child").focusout(function() {
            $(".nav div").removeClass("hover");
        });
        /*Toggleknapp funktion för nivå 2 undermeny
                och döjlning av aktiv undermeny*/
        $(".nav div").on("click", "button", function() {
            $(".nav div.hover").toggleClass("hover");
            $(this).closest(".nav div").toggleClass("hover");

        });
       /*Mouseover funktion för att dölja nivå 2 aktiv undermeny*/
        $(".nav div").mouseover(function(){
           $(".nav div.hover").toggleClass("hover");
            $(this).closest(".nav div").toggleClass("hover");
});
    }
    /*Hover funktion på menyn för sidorna arkiv,övrigt och evenemang*/
    else if ((window.location.href.indexOf("http://localhost/arkiv/") > -1) ||
        (window.location.href.indexOf("http://localhost/ovrigt/") > -1) ||
        (window.location.href.indexOf("http://localhost/evenemangtest/") > -1)) {
        $(".nav div").hover(
            function() {
                $(this).addClass("hover");
            },
            function() {
                $(this).removeClass("hover");
            }
        );

    }
    /*Visar matchande undermeny för nivå 3 samt aktiv länk*/
    else ($(".nav div div [href]").each(function() {
            if (this.href == window.location.href) {
                $(this).parents().eq(3).addClass("hover");
                $(this).parents().eq(3).css("background", "#d2d2d2");
                $(this).css({
                    "background": "black",
                    "color": "#d2d2d2"
                });
                $(this).hover(function() {
                    return false;
                });
            }
        }));
});

});

我希望当用户用鼠标离开另一个链接时，与URL匹配的当前活动链接将获得悬停类。现在，当用户将鼠标悬停在另一个链接上时，活动链接和子菜单的悬停状态将关闭。如果有人可以帮助我，我将不胜感激：）

Answer 1

因此，经过大量尝试，我终于通过编写以下代码找到了解决问题的方法。

jQuery：

/*Mouseover to hide page 2 active submenu*/
        $(".nav div").mouseover(function () {
            $(".nav div.hover").toggleClass("hover");
            $(this).closest(".nav div").addClass("hover");
        });
     /*Mouseout function to show the active submenu after the user
     has their pointer over another link and then leave that link*/
     $(".nav div").mouseout(function(){
        $(this).closest(".nav div").toggleClass("hover");
        $(".nav div.active").addClass("hover");
     });

也许有人可以使用此代码。享受：）

如何在mouseout / mouseleave上显示活动子菜单？

1 个答案: