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

【问题标题】：How to show active submenu on mouseout/mouseleave?如何在 mouseout/mouseleave 上显示活动子菜单？
【发布时间】：2019-02-18 10:07:38
【问题描述】：

我需要让子菜单在我鼠标移出/鼠标离开顶部菜单中的另一个链接时显示。我该怎么做？我不太了解 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 匹配的当前活动链接将获得悬停类。现在，当用户将鼠标悬停在另一个链接上时，活动链接和子菜单会关闭悬停状态。如果有人可以帮助我，我将不胜感激:)

【问题讨论】：

标签： jquery

【解决方案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");
     });

也许有人可以使用此代码。享受:)

【讨论】：