Question

我发现了三层菜单系统的一些很棒的代码，并希望进行一些更改，但无法理解如何完成它。

有人对我希望更改代码有任何想法，以便当用户点击第三层菜单选项（em）时，第二（i）和第一层（b）菜单将保留悬停状态。目前，当用户点击第三层选项时，第二层消失并且第一层悬停被移除。我想我需要一个.click函数用于第三层元素，但我不是那么肯定。我的jquery正处于发展阶段：）

我的.js文件如下：

$(document).ready(function(){

    closetimer = 0;

    $("#navMenu b").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $("#navMenu i").removeClass("hover");
            $(this).parent().next().fadeOut("slow");
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu b").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $("#navMenu i").removeClass("hover");
            $("#navMenu ul:visible").fadeOut("slow");
            $(this).parent().next().fadeIn("slow");
        }
        return false;
    });

    $("#navMenu i").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $(this).parent().next().slideUp(500);
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu i").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").slideUp(500);
            $("#navMenu em").removeClass("hover");
            $("#navMenu ul ul:visible").slideUp(500);
            $(this).parent().next().slideDown(500);
        }
        return false;
    });

    $("#navMenu em").mouseover(function() {
    clearTimeout(closetimer);
        if ($(this).hasClass('hover')) {
            $(this).parent().next().fadeOut("slow");
            $(this).removeClass("hover");
        }
        else {
            $("#navMenu em").removeClass();
            $(this).addClass("hover");
            $("#navMenu ul ul ul:visible").fadeOut("slow");
            $(this).parent().next().fadeIn("slow");
        }
        return false;
    });

    $("#navMenu").mouseover(function() {
    clearTimeout(closetimer);
    });

    $("#navMenu").mouseout(function() {
        closetimer = window.setTimeout(function(){
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $("#navMenu em").removeClass("hover");
        //$("#navMenu ul ul:visible").slideUp(500);
        //$("#navMenu i").removeClass("hover");
        }, 2000);
    }); 

    $("#navMenu em").click(function() {
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $(this).parent().next().fadeIn("slow");
        $(this).parent().addClass("hover");
    });

}); //end DOM

发布我的HTML时遇到了麻烦。如果您需要，请告诉我。

感谢任何能够指引我朝正确方向前进的人。我想知道我似乎无法弄明白的东西！

Answer 1

当您将鼠标悬停在第三层上时，删除我指定的行将停止第二层消失。

$("#navMenu em").mouseover(function() {
clearTimeout(closetimer);
    if ($(this).hasClass('hover')) {
        $(this).parent().next().fadeOut("slow");    <-- REMOVE THIS
        $(this).removeClass("hover");
    }
    else {
        $("#navMenu em").removeClass();
        $(this).addClass("hover");
        $("#navMenu ul ul ul:visible").fadeOut("slow");
        $(this).parent().next().fadeIn("slow");
    }
    return false;
});

此外，您可以通过添加以下内容让悬停类保持在顶层：

$(this).parent().parent().next().addClass("hover");

但我真的无法确保它在没有看到HTML的情况下能够正常工作。

需要第一层和第二层菜单，并在点击第三层时保持悬停状态

1 个答案: