JQuery MouseEnter e Mouseout Events com .toggle () reverso quando o mouse já está acima do elemento Onload?

Question

Eu tenho um menu suspenso funcionando muito bem com o seguinte código:

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

Isso funciona como seria de esperar. A questão é que, se o mouse já estiver mouseenter no $('#menu ul li') quando o $(document).ready(function(){ }) é demitido, a alternância funciona ao contrário?

Como posso evitar isso?

POR EXEMPLO: http://screenr.com/wbd

Answer 1

Você não quer fazer show() sobre mouseenter e hide() sobre mouseleave?

Answer 2

Em vez de apenas ligar toggle Sem argumentos, seus manipuladores de eventos do mouse podem passar em boolean explícito showOrHide valores. Passar true para toggle() no mouseenter rotina e false dentro mouseleave. Ou faça o que sugeriu pela outra resposta e apenas use show e hide.

Answer 3

Quando você carrega o documento sem mover o mouse, nenhuma ação do MouseOver será alternada até você mover o mouse. Mas acho que o MouseOver é alternado à medida que o seu mouse se move, o evento se já estiver "sobre" Onload.

E quanto a este código? De qualquer forma, acho que seu bug vem do MouseOut não ser alterado porque o JS só verifica todos os X Ms e, se você se mover muito rápido, ele sairá da div sem chamar o evento.

$('#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);
});

Se você não se importa com animações, fazer isso com o CSS é sempre uma maneira melhor do que com JS.

Você precisará configurá -lo assim:

<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; }