événements jQuery MouseEnter et mouseOut avec .toggle () inverse lorsque la souris est déjà sur le onLoad élément?

Question

J'ai un menu déroulant fonctionne très bien avec le code suivant:

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

Cela fonctionne comme on peut s'y attendre. Le problème est que si la souris est déjà mouseenter sur le $('#menu ul li') lorsque le $(document).ready(function(){ }) est tiré, la bascule fonctionne dans l'autre sens?

Comment puis-je éviter cela?

Ex: http://screenr.com/wbd

Answer 1

vous ne voulez pas faire show() sur mouseenter et hide() sur mouseleave?

Answer 2

Au lieu d'appeler toggle sans arguments, vos gestionnaires d'événements de souris peuvent transmettre des valeurs explicites showOrHide booléens. Passez à true toggle() dans la routine de mouseenter et false dans mouseleave. Ou comme l'a suggéré l'autre réponse et il suffit d'utiliser show et hide.

Answer 3

Lorsque vous chargez le document sans déplacer la souris, aucune action mouseover sera basculée jusqu'à ce que vous déplacez la souris. Mais je pense que mouseover est basculée que votre souris se déplace, événement si elle est déjà « sur » onLoad.

Qu'en est-ce code? Quoi qu'il en soit, je pense que votre bug vient de mouseout pas parce que JS basculés vérifie que toutes les x ms, et si vous vous déplacez trop vite, il sort de la div sans appeler l'événement.

$('#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 vous ne se soucient pas des animations, faire avec CSS est toujours une meilleure façon puis avec JS.

Vous aurez besoin de le configurer comme ceci:

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