События jQuery MouseEnter и MouseOut с .toggle () отменяются, когда мышь уже находится над элементом onLoad?

Question

У меня есть выпадающее меню, прекрасно работающее со следующим кодом:

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

Это работает так, как вы ожидаете. Проблема в том, что если мышь уже mouseenter на $('#menu ul li'), когда срабатывает $(document).ready(function(){ }), переключатель работает наоборот?

Как мне этого избежать?

EG: http://screenr.com/wbd

Answer 1

вы не хотите сделать show() на mouseenter и hide() на mouseleave?

Answer 2

Вместо простого вызова toggle без аргументов ваши обработчики событий мыши могут передавать явные логические значения showOrHide. Передайте true в toggle() в подпрограмме mouseenter и false в mouseleave. Или сделайте так, как предлагает другой ответ, и просто используйте show и hide.

Answer 3

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

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