jQuery MouseEnter и Mouseout события с .toggle () обратно, когда мышь уже над элементом на загрузке?

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

Когда вы загружаете документ без перемещения мыши, никакие действия MouseOver не будут переключаться, пока вы не перенесете мышь. Но я думаю, что Mouseover переключается по мере движения вашей мыши, события, если она уже «над».

А как насчет этого кода? В любом случае, я думаю, что ваша ошибка исходит из Mouseout, которая не переключена, потому что 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; }