세 번째 계층을 클릭 할 때 첫 번째 및 두 번째 계층 메뉴 및 호버가 필요함

Question

3 단계 메뉴 시스템에 대한 몇 가지 훌륭한 코드를 발견했지만 몇 가지 사항을 변경하려고했지만이를 완료하는 방법을 이해할 수 없습니다.

사용자가 세 번째 계층 메뉴 옵션 (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

내가 지정한 줄을 제거하면 세 번째 계층 위로 마우스를 가져갈 때 두 번째 계층이 사라집니다.

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

을하지만 난 정말이 HTML을 보지 않고 작동 보장 할 수 없습니다

$("#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; 
}); 

또한,이를 추가하여 상위 계층에 머물 수있는 호버 클래스를 얻을 수 있습니다.