드롭 다운 메뉴를 만들 때 .hover로 메뉴를 표시하는 방법

Question

드롭 다운 (탐색) 메뉴를 만들고 있습니다. 사용자가 "DROP"버튼을 가리키면 "메뉴"라는 다른 div가 사라지고 메뉴가 나타납니다. 사용자가 마우스를 버튼에서 움직이면 버튼이 사라 지므로 div를 "MENU"로 유지하는 방법은 무엇입니까? 다음은 jQuery 코드입니다.

$("#DROP").hover(
    function() { 
    $('#MENU').fadeIn('fast'); 
    }, 
    function() { 
    $('#MENU').fadeOut('fast'); 
    } 
); 

마우스가 위에있을 때 "MENU"를 어떻게 표시합니까? 마우스가 꺼지면 사라집니다. 그리고 동시에, 사용자가 마우스를 올려 놓지 않으면 "MENU"가 사라지게하십시오.

Answer 1

이 코드를 추가하면 트릭을 수행해야합니다. 커서가 모두 #DROP 및 #MENU 왼쪽 때까지로 마우스 이벤트가 발생하지 않도록

$('#MENU').hover(function() { 
    $('#MENU').stop(); // stops current animation 
    $('#MENU').show(); 
    }, 
    function() { 
     $('#MENU').fadeOut('fast'); 
    } 
); 

Answer 2

당신은, #MENU #DROP의 자식 요소해야합니다. 예를 들어 http://jsfiddle.net/jAHs2/2/을 참조하십시오.

또 다른 방법으로 setTimeout/clearTimeout을 사용하여 fadeOut 함수를 호출하여 사용자가 하위 메뉴를 가리킬 때 취소 할 수 있습니다. 이 같은 또 하나 개의 기능에 가입

Answer 3

시도,

var isInsideDrop = false; 
$('#MENU').hover(function() { 
    isInsideDrop = true; 
$('#MENU').fadein('fast'); 
    }, 
    function() { 
     $('#MENU').fadeOut('fast'); 
    } 
); 


$('#MENU').mouseover(function(){ 
    if(isInsideDrop){ 
     $('#MENU').show();isInsideDrop = false; 
    } 
    });' 

Answer 4

나는 하나 개의 솔루션이 페이드 아웃 효과에 지연을 추가하는 것입니다 생각합니다. 1-2 초는 충분히 길어야합니다.

$("#DROP").hover(
    function() { 
    $('#MENU').fadeIn('fast'); 
}, 

function() { 
    $('#MENU').delay(2000).fadeOut('fast'); 
});