jQuery - 멀티 레벨 중첩 된 하위 메뉴 - 호버시

Question

지난 몇 시간 동안 다양한 접근 방식과 예제를 시도한 후 제품 탐색 메뉴의 하위 메뉴를 열 수있는 깨끗한 jQuery 메소드를 찾는 데 문제가 있습니다. nav 항목은 WordPress의 사용자 정의 Walker 클래스에서 가져옵니다.

"제품"을 가리키면 아래의 "제품 그룹"수준이 열리고 제품 그룹을 가리키면 하위 메뉴가 열립니다 (다음 단계 인 경우 제품 정보 일 수 있음). . 내가 처음 사용하는 상위 수준() fadeToggle 작업이 - 내가 예를 들어 JSFiddle을 설정 한 : https://jsfiddle.net/yvu237t2/4/

$("ul#productnav").hover(function() { 
    $("ul.sub-menu").first().fadeToggle("fast"); 
}); 

나는 위치와 다음 하위 레벨을 열기위한 구문을 파악에 붙어 그 전에 레벨을 올려 놓는 것을 기준으로합니다.

모든 통찰력, 많이 감사하겠습니다. 여기

가 설계 기준에 대한 최종 결과의 완입니다 : 주요 그룹에서 하나 개의 제품 만있는 경우

, 다음은 같은 중첩 될 것입니다 :

Answer 1

무엇 나는 children() 셀렉터를 사용하고 있었다는 것을 추적하려고 시도했다. 비슷한 경우를 찾는 다른 누군가를 돕기 위해 여기에 참조 용으로 게시했다.

$('ul#productnav li').hover(function() { 
    $(this).children('ul').toggleClass('active'); 
});