jQuery with multiple slideToggle

Question

我有几个最初隐藏在页面上的窗体。当用户点击页面上的特定链接时，相应的表单显示使用jQuery slideToggle。我现在这样做的方式似乎很受欢迎，而且必须有一个更简洁的方式来做到这一点。任何人都可以帮助我更有效地做到这一点，即减少代码，最佳实践等。

// 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

首先，使用美元别名更清晰的代码。然后，在单个语句中结合选择器。最后，使用is()方法与:visible，而不是摆弄CSS。

jQuery(function($) { 
    $('.contribute').on('click', function(){ 
     if ($('.translate-form').is(':visible')) { 
      $('.translate-form, .contribute-form').slideToggle('slow'); 
     } else if ($('.donate-form').is(':visible')) { 
      $('.donation-form, .contribute-form').slideToggle('slow'); 
     } else { 
      $('.contribute-form').slideToggle('slow'); 
     } 
    }); 
}); 

我相信你的逻辑可以进一步简化使用类和DOM遍历。如果您想在http://jsfiddle.net的演示中放置代码，我们可以提供更多建议。