événement déclenche jQuery seulement le feu une fois ... Je leur ai besoin de travailler toujours

Question

$(document).ready(function(){ 
    $('#nav').mouseup(function(){ 
     $(this).css('height','33em') 
     .mouseup(function(){ 
       $(this).css('height','5.7em');  
     });  
    }); 
}); 

http://jsfiddle.net/bryank/afcnR/

Je pense que je manque un concept de base ici ... Je suis mon menu déroulant pour travailler en utilisant JQuery mais cela ne fonctionne qu'une fois, puis cesse de fonctionner. J'ai besoin des événements mouseup pour revenir au début de la fonction d'une certaine façon?

Answer 1

Vous avez un cas de gestionnaires d'événements concurrents, et le dernier (celui qui définit la hauteur à 5.7em) gagne. Les gestionnaires d'événements s'empilent, donc vous continuez à ajouter des copies de celle qui ferme le menu. Essayez de maintenir l'état ouvert/fermé indépendamment. Quelque chose comme ça (jsfiddle):

$(document).ready(function() { 
    $('#nav').data('open', 0).mouseup(function() { 
     if ($(this).data('open') == 0) { 
      $(this).css('height', '33em').data('open', 1); 
     } else { 
      $(this).css('height', '5.7em').data('open', 0); 
     } 
    }); 
}); 

Ou mieux encore, déplacer les détails CSS à une classe CSS:

#nav { height: 5.7em; } 
.open { height: 33em !important; } 

... et juste activer cette classe sur et en dehors (jsfiddle):

$(document).ready(function() { 
    $('#nav').mouseup(function() { 
     $(this).toggleClass('open'); 
    }); 
}); 

Answer 2

Utilisez une classe pour marquer l'état actuel. C'est une technique très utile qui est utilisée de plusieurs façons. Dans ce cas, j'ai utilisé une classe appelée "selected", mais vous pouvez utiliser ce que vous voulez.

Ce violon montre qu'il travaille:
http://jsfiddle.net/acturbo/afcnR/1/

jquery:

$(document).ready(function(){ 

     $('#nav').on("mouseup", function(){ 

      $(this).toggleClass("selected"); 

      if ($(this).hasClass("selected")){ 
       $(this).css('height','33em'); 
      }else{ 
        $(this).css('height','5.7em');  
      } 


     }); 
    });