Pourquoi ce code jquery slideToggle ne fonctionne-t-il pas?

Question

J'essaie de modifier le texte du bouton pour un bouton d'expansion/de réduction. Fondamentalement, un utilisateur clique sur "Réduire" et j'effectue un slideToggle et quand le slideToggle est terminé, je change le texte du bouton en "Expand" et vice-versa. Le code suivant fonctionne très bien mais si vous cliquez rapidement sur le bouton développer/réduire, il perd son esprit et affiche "Développer" quand il est déjà développé ou "Réduire" quand il est déjà réduit.

Tous les conseils sont appréciés.

Merci!

fonction

toggleBox (bouton, boîte) { if ($ (encadré) .is (": caché")) {$ (encadré) .slideToggle ("lent", function() {$ (bouton) .html ("Collapse"); }); } autre { $ (boîte) .slideToggle ("lent", fonction() { $ (bouton) .html ("Expand"); }); }}

Answer 1

Dans votre cas, il serait plus prudent de faire la vérification que vous définissez le texte, après les finitions d'animation, comme celui-ci :

function toggleBox(button, box){ 
    $(box).slideToggle("slow", function(){ 
    $(button).html($(this).is(":hidden") ? "Expand" : "Collapse"); 
    }); 
} 

Actuellement vous vérifiez quand il commence, mais rappelez-vous ce n'est pas :hidden jusqu'à ce qu'il se termine se cacher, si un jusqu'à ce que le slideUp se termine, il est toujours :visible :)

Answer 2

Vous pouvez également essayer d'utiliser

:not(:animated)