어떻게 jQuery를

Question

를 사용하여 마우스를 이동하면 목록 메뉴를 닫습니다 나는 다음과 같은 시나리오가 :

<div class="dropMenuWrapper_content"> 
<img src="images/dropMenu.gif" class="menu_head_content" /> 
<ul class="menu_body_content scroll-pane" id="SmallDropDown"> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx">1</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/1.aspx">2</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/2.aspx">3</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/3.aspx">4</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/4.aspx">5</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/5.aspx">6</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/6.aspx">7</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/7.aspx">8</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/8.aspx">9</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/9.aspx">10</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/10.aspx">11</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/11.aspx">12</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/12.aspx">13</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/13.aspx">14</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/14.aspx">15</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/15.aspx">16</a></li> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx">17</a></li> 
</ul> 

나는 dropMenu 이미지를 클릭, 목록을 사용하여 나에게 드롭 다운 메뉴를 표시하도록 열립니다 jQuery. 이미지 나 목록 자체에서 벗어나는 경우를 제외하면 모두 잘 작동하므로 메뉴를 닫아야합니다. 이미지를 다시 클릭하면 이미 메뉴를 닫을 수있는 기능이 있지만 이미지 나 목록에서 벗어나면 닫을 필요가 있습니다.

나는 divMathWrapp_content div를 사용할 때이 항목이 열려있을 때 내용이 늘어날 것으로 생각 했으므로 div에서 마우스를 떼면 닫히지 만 매우 버그가 있습니다.

플래시에서는 마우스가있는 위치를 확인하기 위해 hitTest를 설정하고 더 이상 해당 영역에 있지 않으면 드롭 메뉴가 닫힙니다.

jQuery를 사용하여 이것을 확인하는 더 좋은 방법이 있습니까?

감사합니다.

Answer 1

BODY 태그에 "닫기 핸들러에서 클릭"을 추가하십시오. 이렇게하면 메뉴 외부를 클릭하면 메뉴가 닫힙니다.

Answer 2

Ayaz의 대답은 저에게 큰 도움이되었습니다!

당신이 마우스를 움직일하고 감사 jQuery를

의

토글 기능을 수행 할 수있는 다음하는 MouseLeave 이벤트를 변경할 수있는 경우 ! -

Answer 3

메뉴를 여는 버튼의 하위 항목 드롭 다운 옵션을 만든 다음 메뉴를 여는 버튼에 mouseout/mouseleave 이벤트 리스너를 추가합니다. 마우스가 버튼 밖에있을 경우 해당 리스너가 적용됩니다. 그들이 메뉴의 일부이기 때문에 메뉴와 자식을 엽니 다. 그러나 <img> 태그는 동적으로 추가하지 않는 한 하위 태그를 가질 수 없으므로 <img> 태그를 자식 (블록 레벨 요소 제외)이있는 다른 태그로 변경하고 CSS background-image 속성을 사용하여 이미지를 지정해야합니다.

또 다른 옵션은 이미지와 메뉴에 mouseover/mouseenter 및 mouseout/mouseleave 리스너를 추가하고 mouseover/mouseleave 리스너가 설정 한 변수를 확인할 약 1 초 동안 각 mouseout/mouseleave 후 시간 초과를 설정하는 것입니다. mouseenter/mouseenter (즉, 사용자가 마우스를 이미지 밖으로 이동하고 mouseout/mouseleave를 트리거 한 다음 메뉴에서 마우스를 움직여 마우스 오버/마우스 중심을 트리거 한 경우)). 예를 들어 일부 내용보기 전환해야 할 때

<img src="images/dropMenu.gif" class="menu_head_content" /> 
<ul class="menu_body_content scroll-pane" id="SmallDropDown"> 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/0.aspx">1</a></li> 
... 
    <li><a class="modalWindow cboxElement" href="http://mysite.com/service/16.aspx">17</a></li> 
</ul> 

<script type="text/javascript"> 
// Global var 
var is_in_menu = false; 

$(function() { 
    // Initially hide menu body 
    $(".menu_body_content").hide(); 

    // MouseEnter event handler 
    $(".menu_head_content, .menu_body_content").bind("mouseenter", function() { 
     is_in_menu = true; 
     if ($(".menu_body_content").css("display") == "none") { 
      $(".menu_body_content").fadeIn("fast"); 
     } 
    }); 

    // MouseLeave event handler 
    $(".menu_head_content, .menu_body_content").bind("mouseleave", function() { 
     is_in_menu = false; 
     setTimeout(function() { 
      if (is_in_menu === false) { 
       $(".menu_body_content").fadeOut("fast"); 
      } 
     }, 1000); 
    }); 

    // Image click handler 
    $(".menu_head_content").click(function() { 
     is_in_menu = true; 
     if ($(".menu_body_content").css("display") == "none") { 
      $(".menu_body_content").fadeIn("fast"); 
     } 
    }); 
}); 
</script> 

Answer 4

마우스 오버와하는 MouseLeave 이벤트는 시나리오에서이 문제 이상 사용 호버를 해결해야한다. api.jquery.com/hover

$("img") 
     .hover(function(){ 
        Here show code should come  
       }, 
       function(){   
        Here show code should come which should hide only if mouse coordinates are    not over menu 
         });