JQuery Mouseenter- und Mausout -Ereignisse mit .Toggle () umgekehrt, wenn die Maus bereits über dem Element -Onload liegt?

Question

Ich habe ein Dropdown -Menü mit dem folgenden Code gut:

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

Dies funktioniert wie Sie erwarten würden. Das Problem ist, dass wenn die Maus bereits ist mouseenter auf der $('#menu ul li') wenn der $(document).ready(function(){ }) Ist der Schalter umgekehrt?

Wie kann ich das vermeiden?

Z.B: http://screenr.com/wbd

Answer 1

Willst du nicht tun? show() an mouseenter und hide() an mouseleave?

Answer 2

Anstatt nur anzurufen toggle Ohne Argumente können Ihre Mausereignis -Handler explizit Booleschen verabschieden showOrHide Werte. Passieren true zu toggle() in dem mouseenter Routine und false in mouseleave. Oder tun Sie wie die andere Antwort vorgeschlagen und verwenden Sie einfach nur show und hide.

Answer 3

Wenn Sie das Dokument laden, ohne die Maus zu verschieben, wird keine Mausover -Aktion umgeschaltet, bis Sie die Maus bewegen. Aber ich denke, Mouseover wird umgekleidet, während sich Ihre Maus bewegt, Ereignis, wenn es bereits "über" Onload ist.

Was ist mit diesem Code? Wie auch immer, ich denke, Ihr Fehler stammt aus dem Mausout, der nicht umgeschaltet wird, da JS nur jede X -MS überprüft. Wenn Sie sich zu schnell bewegen, kommt es aus der DIV, ohne das Ereignis anzurufen.

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

Wenn Sie sich nicht für Animationen interessieren, ist dies mit CSS immer ein besserer Weg als mit JS.

Sie müssen es so einrichten:

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