javascript - 带有多个slideToggle的jQuery

Question

我有一些最初隐藏在页面上的表单。当用户单击页面上的特定链接时，会使用 jQuery slipToggle 显示相应的表单。我现在做这件事的方式似乎是经过深思熟虑的，必须有一种更简洁的方式来做这件事。谁能帮助我更有效地做到这一点，即更少的代码、最佳实践等？

    // 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 的演示中我们可以提供更多建议。