마우스가 이미 onLoad 요소 위에있을 때 .toggle()을 사용하여 jQuery MouseEnter 및 MouseOut 이벤트가 역전됩니까?

Question

다음 코드로 잘 작동하는 드롭 다운 메뉴가 있습니다.

$('#menu ul li').mouseenter(function(){ 
    $(this).children(".dropdown").toggle(); 
}).mouseleave(function(){ 
    $(this).children(".dropdown").toggle(); 
}); 

예상대로 작동합니다. 문제는 $(document).ready(function(){ })가 실행될 때 $('#menu ul li')에서 마우스가 이미 mouseenter이면 토글이 다른 방향으로 작동한다는 것입니다.

어떻게 이것을 피할 수 있습니까?

EG : http://screenr.com/wbd

Answer 1

당신은 mouseleave에 mouseenter에 show() 및 hide() 싶지 않아?

Answer 2

아무런 인수없이 toggle을 호출하는 대신 마우스 이벤트 처리기는 명시 적 부울 showOrHide 값을 전달할 수 있습니다. mouseenter 루틴에서는 true에서 toggle()까지, false에서는 mouseleave을 전달하십시오. 아니면 다른 답변에서 제안한대로 show과 hide을 사용하면됩니다.

Answer 3

마우스를 움직이지 않고 문서를로드하면 마우스를 움직일 때까지 마우스 오버 조 치가 전환되지 않습니다. 하지만 마우스 오버가 이미 onLoad 이상인 경우 마우스 이동, 이벤트로 토글됩니다.

이 코드는 어떻게됩니까? 어쨌든, JS는 모든 x ms를 검사하기 때문에 마우스를 끈 상태에서 마우스를 끈 상태가 아니라고 생각합니다. 너무 빨리 움직이면 이벤트를 호출하지 않고 div에서 벗어납니다.

$('#menu ul li').mouseenter(function(){ 
    // hide all other divs 
    $(".dropdown").hide(0); 
    // show the div we want 
    $(this).children(".dropdown").show(0); 
}).mouseleave(function(){ 
    $(".dropdown").hide(0); 
}); 

애니메이션을 신경 쓰지 않는다면 CSS로 이것을하는 것이 항상 JS와 더 좋은 방법입니다.

이처럼 설정해야합니다 :

<div id="menu"> 
    <ul> 
     <li> 
      Menu 1 
      <div class="dropdown">Sub1</div> 
      <div class="dropdown">Sub2</div> 
     </li> 
     <li> 
      Menu 2 
      <div class="dropdown">Sub1</div> 
      <div class="dropdown">Sub2</div> 
     </li> 
    </ul> 
</div> 

CSS :

.dropdown { display: none; position: relative; } 
#menu li:hover .dropdown { display: block; }