메뉴에 대한 jQuery 호버 상태를 결정합니다.

Question

jQuery로 드롭 다운 메뉴를 작성하고 있습니다. 질문이 있습니다. 내 메뉴는 두 부분 span.menu_head (메뉴 막대에 있음)와 ul.menu_body (드롭 다운 항목이 있음)로 구성됩니다. 나는 span.menu_head 위에 마우스를 올려 때

$("span.menu_head").hover(function(){ 
    $(this).next().slideDown('medium'); 
}, function(){ 
}); 

$("ul.menu_body").hover(function(){ 
}, function(){ 
    $(this).slideUp('medium'); 
}); 

그래서,의 ul.menu_body 아래로 슬라이드와 나는 ul.menu_body을 떠날 때, 그것은 위로 밀어 : 나는 다음과 같은 jQuery 코드가있다. 이것은 예상대로 작동합니다. 그러나 추가 할 부분이 하나 더 있습니다. 마우스가 span.menu_head를 떠날 때 마우스가 ul.menu_body 위에 있지 않으면 ul.menu_body를 slideUp에 넣고 싶습니다. jQuery에서 마우스가 특정 요소 위에 있는지 확인하는 방법이 있습니까? 또는이 효과를 더 효과적으로 얻을 수있는 방법이 있습니까?

감사합니다,

폴

Answer 1

나는 hoverIntent (http://cherne.net/brian/resources/jquery.hoverIntent.html)를 사용하여 솔루션을 발견했다.

마우스를 ul.menu_body 위에 올리면 플래그를 설정하여 메뉴를 닫기 전에이 플래그를 확인할 수 있습니다.

 var overBody = false; 

     function mnuOpen() { 
      $(this).next().slideDown('medium'); 
     } 
     function mnuClose() { 
      if (!overBody) { 
       $(this).next().slideUp('medium'); 
      } 
     } 

     var headConfig = { 
      over: mnuOpen, 
      timeout: 250, 
      out: mnuClose 
     } 

     $("span.menu_head").hoverIntent(config); 

     $("ul.menu_body").hover(function(){ 
      overBody = true; 
     }, function(){ 
      overBody = false; 
      $(this).slideUp('medium'); 
     }); 

이것은 원하는 동작을 생성합니다. 마우스가 하위 메뉴에서 머리글로 돌아 가면 닫고 다시 열지 않으므로이 동작을 감지하는 또 다른 플래그를 설정해야 할 수도 있습니다.

폴