Jquery/HTML 드롭 다운 메뉴 호버 상태

Question

드롭 다운 메뉴 ('# units-menu-links') 위에 마우스를 올리더라도 마우스를 올려 놓아도 드롭 다운 메뉴를 만들려고합니다. 사용자가 여전히 'units-menu-links'div 위로 마우스를 가져 가면 열어 둘 수는 없습니다. 현재는 아무것도하지 않지만, 사용자가 "# units-nav"div 위로 마우스를 가져 가지 않으면 사라지는 두 번째 함수 안에 .toggle이 있어야합니다.

다음

<div id="units-menu-links"> 
    <center> 
      <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p> 
    </center> 
</div> 

<div id="menu"> 
     <div id="menu-inside"> 
       <div class="bar"> 
         <div class="nav-block" id="units-nav"> 
           <a href="/link/">Menu Button</a> 
         </div> 
       </div> 
     </div> 
</div> 

내 JQuery와있다 : 여기

처럼 내 HTML이 모습입니다

$('#units-menu-links').hide(); 
    $("#units-nav").hover(
      function() { 
       // Over the hover. 
       $('#units-menu-links').toggle(); 
      }, 
      function() { 
       // PLEASE READ THE FOLLOWING COMMENTS TO UNDERSTAND THE FUNCTIONALITY I AM TRYING TO GET. 
       // When the users leaves #units-nav and #units-menu-links 
       // then do the "$('#units-menu-links').toggle();" again to hide this. 
       // However if the user is hovering over "$('#units-menu-links').toggle();" then don't do anything. 
      } 
    ); 

(I가 찾고으로 SO뿐만 아니라에서 꽤 많은 질문과 답변을 검토 한 결과 Google이이 문제를 해결하는 데 도움이되는 것을 찾을 수는 없지만 매우 일반적인 문제인 것처럼 보이지만 사람들은 HTML 구조를 광산과 다르게 만들어서 리소스를 찾기 어렵게 만듭니다.)

Answer 1

마우스가 하위 메뉴 밖에 갈 때 메뉴를 숨기기 시도 :

$('#units-menu-links').hide(); 
$("#units-nav").hover(
    function() { 
     $('#units-menu-links').show(); 
    }, 
    function() { 
    } 
); 
$("#units-menu-links").hover(
    function() { 
    }, 
    function() { 
     $('#units-menu-links').hide(); 
    } 
); 

​ 

적으로는, 내가 자바 스크립트를 사용하지 않는 것이 좋습니다 것입니다.

HTML :

<div id="menu" style="background-color: red"> 
    <div id="menu-inside"> 
     <div class="bar"> 
      <div class="nav-block" id="units-nav"> 
       <a href="/link/">Menu Button</a> 
      </div> 
     </div> 
    </div> 
    <div id="units-menu-links" style="background-color: green"> 
     <center> 
      <p class="units-menu-links-items" href="dynamically generated URL">Menu Item</p> 
     </center> 
    </div> 
</div> 

CSS :

#menu #units-menu-links { 
    display: none; 
} 

#menu:hover #units-menu-links { 
    display: block; 
} 
​ 

가 여기에 Fiddle입니다.

Answer 2

호버를 사용할 때 하위 메뉴를 #units-nav 요소 아래에 중첩시켜야합니다. 그 때 그것은 작동 할 것이다. 이렇게 할 수 없다면 호버 기능의 두 번째 콜백에 일부 시간 제한을 구현할 수 있으며 사용자가 #units-menu-links-element을 가리키면 시간 제한을 중지 할 수 있습니다. 그러나 이것은 다소 끔찍한 일이며 사용자는 혼란스러워 할 수 있습니다 행동.

Answer 3

$('#units-menu-links').hide(); 
var timeOut; 
$("#units-nav").hover(
    function() { 
     // Over the hover. 
     $('#units-menu-links').show(); 
     clearTimeout(timeOut); 
    }, 
    function() { 
     timeOut = setTimeout(function(){ 
      $('#units-menu-links').hide(); 
     }, 100); 
    } 
); 

$('#units-menu-links').hover(
    function() { 
     clearTimeout(timeOut); 
    }, 
    function() { 
     timeOut = setTimeout(function(){ 
      $('#units-menu-links').hide(); 
     }, 100); 
    } 
)