需要第一层和第二层菜单并将鼠标悬停在点击第三层时

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工作。