jQuery MouseEnter und MouseOut-events mit .toggle() umkehren, wenn sich die Maus bereits über das element onLoad?

Ich habe ein dropdown-Menü arbeitet Super mit dem folgenden code:

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

Diese funktioniert wie man es erwarten würde. Das Problem ist, dass wenn die Maus schon mouseenter auf die $('#menu ul li') wenn die $(document).ready(function(){ }) ausgelöst wird, wird der toggle-Umgekehrt funktioniert?

Wie kann ich diese vermeiden?

ZB: http://screenr.com/wbd

InformationsquelleAutor tarnfeld | 2010-02-06

  1. 2

    wollen Sie nicht zu tun show() auf mouseenter und hide() auf mouseleave?

    show()/hide() das gleiche tun wie wechseln - das gleiche passiert, obwohl ich denke, dass der Fehler mit den tatsächlichen Ereignissen aufgerufen wird, falsch herum, weil die Maus über es, onload 🙁
    dies war tatsächlich korrekt, ich habe gerade realisiert, dass ich sah immer wieder ob es geklappt hat und vergessen hat zu laden! 😐 ty 🙂

    InformationsquelleAutor Brandon Henry

  2. 1

    Statt nur mitzugehen toggle ohne Argumente, Ihre Maus-event-Handler übergeben können, explicit boolean showOrHide Werte. Pass true zu toggle() im mouseenter routine, und false im mouseleave. Oder wie vorgeschlagen, durch die andere Antwort, und nutzen Sie einfach show und hide.

    InformationsquelleAutor Pointy

  3. 0

    Wenn Sie laden Sie das Dokument, ohne die Maus zu bewegen, keine mouseover-Aktion ein-und ausgeschaltet werden, bis Sie die Maus bewegen. Aber ich denke, mouseover wird umgeschaltet, wie die Maus bewegt, Ereignis, wenn es schon "über" onLoad".

    Was ist mit diesem code ?
    Anyways, ich denke, dein Fehler kommt aus dem mouseout nicht ausgeschaltet wird, denn das JS prüft nur alle x ms, und wenn man sich zu schnell bewegt, wird es aus der div ohne Aufruf des Ereignis.

    $('#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 nicht kümmern, über Animationen, dies mit CSS ist immer ein besserer Weg, dann mit JS.

    Werden Sie brauchen, um es einzurichten, wie diese :

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

    InformationsquelleAutor Daan

Schreibe einen Kommentar