.toggle ()가있는 jQuery MouseEnter 및 마우스 아웃 이벤트는 마우스가 이미 요소 onload에있을 때 반대로?

Question

드롭 다운 메뉴가 다음 코드로 잘 작동합니다.

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

이것은 당신이 기대하는대로 작동합니다. 문제는 마우스가 이미 있다면입니다 mouseenter 에 $('#menu ul li') 때 $(document).ready(function(){ }) 발사, 토글은 다른 방식으로 작동합니까?

이것을 피하려면 어떻게해야합니까?

예 : http://screenr.com/wbd

Answer 1

당신은하고 싶지 않습니다 show() ~에 mouseenter 그리고 hide() ~에 mouseleave?

Answer 2

전화하는 대신 toggle 논쟁이 없으면 마우스 이벤트 핸들러는 명백한 부울을 통과 할 수 있습니다. showOrHide 가치. 통과하다 true 에게 toggle() 에서 mouseenter 일상 및 false 안에 mouseleave. 또는 다른 답변에서 제안한대로 수행하고 그냥 사용하십시오. show 그리고 hide.

Answer 3

마우스를 움직이지 않고 문서를로드하면 마우스를 움직일 때까지 마우스 오버 작업이 전환되지 않습니다. 그러나 마우스가 움직일 때 마우스 오버가 전환되고 이미 "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; }