jQuery MouseEnter y mouseOut eventos con .toggle () inversa cuando el ratón ya está sobre el elemento onLoad?

Question

Tengo un menú desplegable que trabaja muy bien con el siguiente código:

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

Esto funciona como era de esperar. La cuestión es que si el ratón ya está mouseenter en el $('#menu ul li') cuando se dispara el $(document).ready(function(){ }), el conmutador funciona al revés?

¿Cómo puedo evitar esto?

EG: http://screenr.com/wbd

Answer 1

Por qué no quieres hacer show() en mouseenter y hide() en mouseleave?

Answer 2

En lugar de simplemente llamando toggle sin argumentos, sus controladores de eventos de ratón pueden pasar en los valores booleanos showOrHide explícitos. Pasar a true toggle() en la rutina mouseenter y false en mouseleave. O hacer lo sugerido por la otra respuesta, y sólo tiene que utilizar show y hide.

Answer 3

Cuando se carga el documento sin mover el ratón, ninguna acción al pasar el ratón se puede activar hasta que mueva el ratón. Pero creo que al pasar el ratón se activa como sus movimientos del ratón, caso, si ya está "sobre" onLoad.

¿Qué pasa con este código? De todas formas, creo que el error proviene de mouseout no que se alternará porque JS sólo comprueba cada x ms, y si se mueve demasiado rápido, que se salga de la div sin llamar al 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);
});

Si no se preocupan por las animaciones, haciendo esto con CSS es siempre una manera mejor que con JS.

Usted tendrá que configurarlo de la siguiente manera:

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