여러 slideToggle이있는 jQuery

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

먼저 더 깨끗한 코드에는 달러 별칭을 사용하십시오. 그런 다음 선택기를 단일 명령문에 결합하십시오. 마지막으로 :visible으로 is() 메소드를 사용하고 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으로 제안하십시오.