Le menu déroulant ne fonctionne pas comme codé - jQuery

Question

Ceci est un code pour un menu déroulant. Il est conçu pour dérouler (umdown) lorsque le curseur se déplace sur le bouton. Mais lorsque le curseur s'éloigne de Multiple, l'umdown disparaît.

balisage HTML:

<div id="button"><span id="text">Down</span></div> 

<div id="umdown"> 
    <div id="multi">Multiple</div> 
    <div id="sd">Single</div> 
</div> 

code CSS:

#button{ 
    position:relative; top:1px; background-color:#060; width:200px; height:30px; background-image:url(../images/btn_bg.jpg); cursor:pointer; 
} 

#text{ position:absolute; margin-top:5px; text-align:center; width:200px; height:30px; font-stretch:expanded; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-weight:bold; font-size:17px;} 

#multi{ 
    width:160px; margin-left:5px; 
} 

#sd{ 
     width:160px; margin-left:5px; 
} 


#umdown{ 
    position:relative; left:30px; height:50px; background-color:#900; width:170px; cursor:pointer; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; color:#000; font-size:14px; 
} 

code Javascript:

$('#button').bind('mouseover',function(){ 
    $('#umdown').fadeIn();}); 
    $('#umdown').bind('mouseover',function(){ 
       $('#umdown').show();  }); 

    $('#umdown').bind('mouseout',function(){                $('#umdown').fadeOut(); 
    }); 

Laissez-moi savoir ce que je l'ai fait mal.

Merci Jean

Answer 1

Au lieu de mouseout ici, vous voulez mouseleave, remplacez donc ceci:

$('#umdown').bind('mouseout',function(){ 
    $('#umdown').fadeOut(); 
}); 

Avec ceci:

$('#umdown').bind('mouseleave',function(){ 
    $(this).fadeOut(); 
}); 

La principale différence est dans le mouseleave docs:

L'événement mouseleave diffère de mouseout dans la façon dont il gère le barbotage d'événements. Si mouseout a été utilisé dans cet exemple, lorsque le pointeur de la souris est sorti de l'élément Inner, le gestionnaire est déclenché. C'est habituellement un comportement indésirable. L'événement mouseleave, d'autre part, ne déclenche son gestionnaire que lorsque la souris quitte l'élément auquel elle est liée, et non un descendant. Ainsi, dans cet exemple, le gestionnaire est déclenché lorsque la souris quitte l'élément Outer, mais pas l'élément Inner.

Je suggère d'utiliser .stop() dans ce cas aussi bien pour gérer fanent/planer des problèmes, de sorte que votre code général ressemble à ceci:

$('#button').bind('mouseover',function(){ 
    $('#umdown').stop(true, true).fadeIn(); 
}); 
$('#umdown').bind('mouseleave',function(){ 
    $(this).stop(true, true).fadeOut(); 
});​ 

You can see a working demo here

Answer 2

Si je comprends bien, vous voulez juste pour basculer la visibilité de #umdown lorsque survolée sur le bouton.

$("#button").hover(function(){ 
    $("#umdown").fadeIn(500); 
}) 


$("#umdown").mouseleave(function(){ 
    $(this).fadeOut(300) 
}); 

Voir une démonstration de travail here