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, мы можем предложить больше предложений.