.toggle ()가있는 jQuery MouseEnter 및 마우스 아웃 이벤트는 마우스가 이미 요소 onload에있을 때 반대로?
문제
드롭 다운 메뉴가 다음 코드로 잘 작동합니다.
$('#menu ul li').mouseenter(function(){
$(this).children(".dropdown").toggle();
}).mouseleave(function(){
$(this).children(".dropdown").toggle();
});
이것은 당신이 기대하는대로 작동합니다. 문제는 마우스가 이미 있다면입니다 mouseenter
에 $('#menu ul li')
때 $(document).ready(function(){ })
발사, 토글은 다른 방식으로 작동합니까?
이것을 피하려면 어떻게해야합니까?
해결책
당신은하고 싶지 않습니다 show()
~에 mouseenter
그리고 hide()
~에 mouseleave
?
다른 팁
전화하는 대신 toggle
논쟁이 없으면 마우스 이벤트 핸들러는 명백한 부울을 통과 할 수 있습니다. showOrHide
가치. 통과하다 true
에게 toggle()
에서 mouseenter
일상 및 false
안에 mouseleave
. 또는 다른 답변에서 제안한대로 수행하고 그냥 사용하십시오. show
그리고 hide
.
마우스를 움직이지 않고 문서를로드하면 마우스를 움직일 때까지 마우스 오버 작업이 전환되지 않습니다. 그러나 마우스가 움직일 때 마우스 오버가 전환되고 이미 "Over"Onload 인 경우 이벤트가 발생합니다.
이 코드는 어떻습니까? 어쨌든, 나는 당신의 버그가 마우스 아웃에서 나오는 것으로 생각합니다.
$('#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 로이 작업을 수행하는 것이 항상 더 나은 방법입니다.
다음과 같이 설정해야합니다.
<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; }
제휴하지 않습니다 StackOverflow