jquery 하위 메뉴 별도의 div에있는 하위 메뉴로 숨기기/표시

Question

원래 트리거 안에 있지 않은 호버의 하위 메뉴를 숨기거나 표시하려면 어떻게해야합니까? 숨김/표시가 작동

<ul> 
    <li class="toggleTrigger" id="subMenu"><a href="#">header</a></li> 
</ul> 

<div class="subMenu"> 
    <p>hello!</p> 
</div> 

자바 스크립트

function configFile() { 
$('.toggleTrigger').hover(function() { 
    var trigger = $(this).attr('id'); 
     target = '.'+trigger; 
$(target).show();  
}, function() { 
    $(target).hide();     
    });  
} 

HTML :

나는 다음과 같은 코드가 있습니다. 유일한 문제는 트리거에서 벗어난 후에 내 하위 메뉴도 숨겨져 있기 때문에 하위 메뉴에서 아무 것도 클릭 할 수 없습니다.

내 CSS를 망칠 수 있기 때문에 목록 항목 안에 하위 메뉴를 넣고 싶지 않습니다. 트리거에서 하위 메뉴로 마우스를 가져갈 수있는 방법이 있습니까? 둘 다 떠날 때만 하위 메뉴가 숨겨집니다.

도움 주셔서 감사합니다.

Answer 1

중첩 된 ul-list를 사용해보십시오.