빠른 jQuery 드롭 다운 메뉴를 만들려고 시도합니다.

Question

나는이 일을 잘하고 있는지 잘 모르지만 jQuery에서 간단한 드롭 다운 메뉴를 만들려고합니다. 나는 기본적으로 ... 메뉴 항목이 마우스 커서를 올려 확인한되면 표시 (링크) 사업부를 원하는

메뉴 모음 :

<ul id="mainlevel"> 
    <li><a href="#" class="mainlevel_home" ><span>Home</span></a></li> 
    <li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li> 
    <li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li> 
</ul> 

숨겨진 사업부 :

<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div> 

The jQuery :

$(".mainlevel_feature-writers").hover(function(){ 
    $(".subMenu").fadeIn("slow"); 
}, function() { 
    $(".subMenu").fadeOut("slow"); 
}); 

이제 숨겨진 div가 사라지고 잘 사라집니다.하지만 누군가가 새로 표시된 div 내부의 무언가를 가리키면 어떻게 페이드 아웃하지 않을까요?

죄송합니다. 이것이 정말로 분명한 질문 인 경우 .. 아직 배우고 있습니다! :)

Answer 1

mouseover 및 mouseout 이벤트의 처리를 분리해야한다고 생각합니다.

mouseover 핸들러를 "최상위 레벨"메뉴 요소에 연결하고 mouseout 핸들러를 숨겨진 "드롭 다운"div (충돌을 관리하기위한 일부 상태 코드 포함)에 연결하려고합니다.