Problèmes de liste déroulante

Question

J'essaie de créer une liste déroulante. Je l'ai travail, mais pas complètement, en utilisant ce code:

$(document).ready(function(){ 
    $("#zone-bar li em").hover(function() { 
     var hidden = $(this).parents("li").children("ul").is(":hidden"); 

     $("#zone-bar>ul>li>ul").hide()   
     $("#zone-bar>ul>li>a").removeClass(); 

     if (hidden) { 
      $(this).parents("li").children("ul").toggle() 
        .parents("li").children("a").addClass("zoneCur"); 
     } 
    }); 
}); 

J'ai réussi à le faire fonctionner ainsi de suite survolez la liste déroulante apparaît, mais lorsque vous vous déplacez pour sélectionner l'un des éléments dans la liste déroulante la liste déroulante se ferme. Comment puis-je résoudre ce problème?

Cela fonctionne si je le mets à onclick, mais vous devez cliquer sur la flèche pour le refermer. Vous pouvez voir un exemple en direct à http://doctorwhohd.com (actuellement en utilisant onclick)

Answer 1

Essayez de mettre le vol stationnaire sur

#zone-bar li 

et non sur l'em

Mise à jour, oui, vous devez modifier le script:

$("#zone-bar li").hover(function() { 
    var hidden = $(this).children("ul").is(":hidden"); 

    $("#zone-bar>ul>li>ul").hide()   
    $("#zone-bar>ul>li>a").removeClass(); 

    if (hidden) { 
     $(this).children("ul").toggle() 
       .children("a").addClass("zoneCur"); 
    } 

});

Cependant, la suggestion d'utiliser mouseenter est probablement supérieure, il semble que cela provoque un scintillement momentané.

Vous pouvez envisager de le faire avec du CSS pur, il n'y a aucune raison évidente d'utiliser jquery pour créer cet effet.

#zone-bar li{ height:1em; overflow:hidden}; 
#zone-bar li:hover{ height:auto}; 

Answer 2

Il se comporte probablement de cette façon parce hover() est destiné à prendre 2 fonctions. Un pour mouseenter et un pour mouseleave.

Lorsque vous lui donnez un seul, je pense qu'il déclenche celui pour les deux événements.

Au lieu de hover(), utilisez mouseenter().

$("#zone-bar li em").mouseenter(function() { 
    var hidden = $(this).parents("li").children("ul").is(":hidden"); 

    $("#zone-bar>ul>li>ul").hide()   
    $("#zone-bar>ul>li>a").removeClass(); 

    if (hidden) { 
     $(this).parents("li").children("ul").toggle() 
       .parents("li").children("a").addClass("zoneCur"); 
    } 
});