Sur le clic - problèmes d'événement jQuery

Question

J'essaye de créer la fonction, qui après avoir cliqué sur le bouton, ouvrira mon champ de recherche, et après avoir cliqué de nouveau sur ce même bouton il le fermera.

J'ai construire ceci:

$("#searchbutton").click(function(){ 
     $("#searchBox").animate({top: '0px'}, 500), 

     $(this).click(function(){ 
     $("#searchBox").animate({top: '-47px'}, 500) 
      }); 
     }); 

Il fonctionne très bien, mais seulement première fois après que je clique dessus. Ensuite, si je clique dessus encore pour rouvrir sans actualiser le bouton de page se cachera automatiquement.

Pourquoi cela se produit-il?

Merci pour votre aide à l'avance

Dom

Answer 1

Votre problème est que vous ne déliez le premier gestionnaire de clic.

La meilleure solution est d'utiliser le gestionnaire toggle, comme ceci:

$("#searchbutton").toggle(
    function() { $("#searchBox").animate({top: '0px'}, 500); }, 
    function() { $("#searchBox").animate({top: '-47px'}, 500); } 
); 

Answer 2

Chaque fois que vous cliquez sur que vous ajoutez un autre gestionnaire d'événements de clic. Vous n'enlevez aucun. Vous pouvez le faire:

$("#searchbutton").click(show_search); 

function show_search() { 
    $("#searchBox").animate({top: '0px'}, 500)}); 
    $("#searchbutton").unbind("click", show_search).click(hide_search); 
} 

function hide_search() { 
    $("#searchBox").animate({top: '-47px'}, 500)}); 
    $("#searchbutton").unbind("click", hide_search).click(show_search); 
} 

mais l'ajout/suppression de gestionnaires d'événements est plutôt moche. Heureusement, il existe une solution plus simple pour cela:

$("#searchbutton").click(function() { 
    $("#searchbutton").slideToggle(); 
});