jQuery MouseEnter e mouseOut eventi con .toggle () invertono quando il mouse è già sopra l'elemento onLoad?

Question

Ho un menu a discesa che lavora grande con il seguente codice:

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

Questo funziona come ci si aspetterebbe. Il problema è che se il mouse è già mouseenter sul $('#menu ul li') quando il $(document).ready(function(){ }) viene sparato, l'interruttore funziona il contrario?

Come posso evitare questo?

EG: http://screenr.com/wbd

Answer 1

non si vuole fare show() su mouseenter e hide() su mouseleave?

Answer 2

Invece di limitarsi a chiamare toggle senza argomenti, i vostri gestori di eventi del mouse possono passare in valori booleani showOrHide espliciti. Passare al true toggle() nella routine mouseenter, e false in mouseleave. O fare come suggerito dal altra risposta e basta usare show e hide.

Answer 3

Quando si carica il documento senza spostare il mouse, nessuna azione mouseover verrà attivato fino a quando si sposta il mouse. Ma penso che al passaggio del mouse viene attivata come i vostri movimenti del mouse, evento se è già "finita" onLoad.

Che dire di questo codice? In ogni modo, penso che il bug viene da mouseout non essere attivata perché JS controlla solo ogni x ms, e se si sposta troppo velocemente, si esce dalla div senza chiamare l'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 non si preoccupano di animazioni, facendo questo con CSS è sempre un modo migliore poi con JS.

È necessario configurarlo in questo modo:

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