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的演示中放置代碼，我們可以提供更多建議。