Menu Afficher/masquer à l'aide jquery

Question

Ceci est un autocommutateur d'un menu

<span id="menu2">Menu 2</span> 

CSS pour ce qui précède div

#menu2_submenu{ 
    position:absolute; left:375px; top:35px; background-color:#111; height:50px; width:160px; color:#424242; 
} 

Sous-menu

<div id="submenu"> 
         <div id="submenu1">submenu1</div> 
         <div id="submenu2">submenu2</div> 
</div> 

et le code jquery qui va w vec le ci-dessus

$('#menu2').mouseover(function(){ 
       $('#submenu').show(); 
       }); 



$('#submenu').mouseleave(function(){ 
        $('#submenu').hide(); 
        }); 

Lorsque la souris est plus menu2 $ ('sous-menu #'). montre, et quand la souris quitte $ ('sous-menu #'), $ ('sous-menu #). peaux. Maintenant, c'est bien, le problème, c'est quand la souris quitte menu2 si la souris entre dans le sous-menu ou pas # menu2 devrait cacher.

Je ne peux pas utiliser mouseleave à la fois sur # menu2 et #submenu, comment le faire.

Merci Jean

Answer 1

Essayez d'utiliser un plug-in, ne pas inventer un vélo: jQueryMenu

Answer 2

Je ne suis pas sûr d'avoir compris vos questions, mais je vais vous laisser savoir ce que je fais généralement dans ce genre de situation.

// First I block the event from bubbling up to the document 
$("#menu2, #submenu").mouveover(function(ev) { ev.stopPropagation(); } 

// Then, when entering the #menu2, show the #submenu, but also install a listener 
// for the rest of the document to hide the #submenu. 
$("#menu2").mouseenter(function() { 
    // Going back from submenu to menu should do nothing (make sure to not leave a gap) 
    var submenu = $("#submenu:hidden"); 
    if (submenu.length > 0) { 
    submenu.show(); // Only if it's hidden 
    $(document).one("mouseover", function() { 
     submenu.hide(); 
    }); 
    } 
});