jQuery avec plusieurs slideToggle

Question

J'ai quelques formulaires qui sont initialement cachés sur une page. Lorsqu'un utilisateur clique sur un lien spécifique de la page, le formulaire correspondant s'affiche à l'aide de la commande slideToggle de jQuery. La façon dont je le fais en ce moment semble convulsée et il doit y avoir une façon plus succincte de le faire. Quelqu'un peut-il m'aider à être plus efficace dans ce processus, c'est-à-dire, moins de code, de meilleures pratiques, etc.?

// Show & Hide the forms on the "We need your help" page 
     jQuery('.contribute-form').hide(); 
     jQuery('.translate-form').hide(); 
     // Contribute Form 
     jQuery('.contribute').on('click', function(){ 
      if(jQuery('.translate-form').css('display', 'block')){ 
       jQuery('.translate-form').slideToggle('slow'); 
       jQuery('.contribute-form').slideToggle('slow'); 
      } else if(jQuery('.donate-form').css('display', 'block')){ 
       jQuery('.donation-form').slideToggle('slow'); 
       jQuery('.contribute-form').slideToggle('slow'); 
      } else { 
       jQuery('.contribute-form').slideToggle('slow'); 
      } 
     }); 
     // Translate Form 
     jQuery('.translate').on('click', function(){ 
      if(jQuery('.donate-form').css('display', 'block')){ 
       jQuery('.donate-form').slideToggle('slow'); 
       jQuery('.translate-form').slideToggle('slow'); 
      } else if(jQuery('.contribute-form').css('display', 'block')){ 
       jQuery('.contribute-form').slideToggle('slow'); 
       jQuery('.translate-form').slideToggle('slow'); 
      } else { 
       jQuery('.translate-form').slideToggle('slow'); 
      } 
     }); 
     // Donate Form 
     jQuery('.donate').on('click', function(){ 
      if(jQuery('.translate-form').css('display', 'block')){ 
       jQuery('.translate-form').slideToggle('slow'); 
       jQuery('.donate-form').slideToggle('slow'); 
      } else if(jQuery('.contribute-form').css('display', 'block')){ 
       jQuery('.contribute-form').slideToggle('slow'); 
       jQuery('.donate-form').slideToggle('slow'); 
      } else { 
       jQuery('.donate-form').slideToggle('slow'); 
      } 
     }); 

Answer 1

D'abord, utilisez l'alias dollar pour le code de nettoyage. Ensuite, combinez les sélecteurs dans des instructions simples. Enfin, utilisez la méthode is() avec :visible plutôt que de bidouiller avec CSS. Je suis sûr que votre logique pourrait être encore simplifiée en utilisant des classes et traversant DOM. Si vous souhaitez mettre votre code dans une démo au http://jsfiddle.net, nous pourrions offrir plus de suggestions.