Question

我为简单的点击事件编写了一个jquery代码，但是我还没有使用循环。这就是为什么but_4和but_3的点击事件需要花费大量时间来回应的原因？以下是我的代码：

$(document).ready(function(){
$('.modulename').animate({left:'15px',opacity:'1'},2000,function(){
      $('.eventone,.rule_1,.faq_1,.cont_1,.spons_1').animate({right:'45px',opacity:'1'},1000,function(){
             $('.eventtwo,.rule_2,.faq_2,.cont_2,.spons_2').animate({left:'10px',opacity:'1'},1000,function(){
            $('.eventthree,.rule_3,.faq_3,.cont_3,.spons_3').animate({right:'45px',opacity:'1'},1000,function(){
                $('.eventfour,.rule_4,.faq_4,.cont_4,.spons_4').animate({left:'10px',opacity:'1'},1000);
            });
        });
    });
});

    var $open = null;
$('.but1_1').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.rule_1').slideToggle();
    $open = $('.rule_1');
});
$('.but1_2').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.faq_1').slideToggle();
    $open = $('.faq_1');
});
$('.but1_3').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.cont_1').slideToggle();
    $open = $('.cont_1');
});
$('.but1_4').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.spons_1').slideToggle();
    $open = $('.spons_1');
});

$('.but2_1').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.rule_2').slideToggle();
    $open = $('.rule_2');
});
$('.but2_2').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.faq_2').slideToggle();
    $open = $('.faq_2');
});
$('.but2_3').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.cont_2').slideToggle();
    $open = $('.cont_2');
});
$('.but2_4').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.spons_2').slideToggle();
    $open = $('.spons_2');
});

$('.but3_1').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.rule_3').slideToggle();
    $open = $('.rule_3');
});
$('.but3_2').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.faq_3').slideToggle();
    $open = $('.faq_3');
});
$('.but3_3').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.cont_3').slideToggle();
    $open = $('.cont_3');
});
$('.but3_4').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.spons_3').slideToggle();
    $open = $('.spons_3');
});

$('.but4_1').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.rule_4').slideToggle();
    $open = $('.rule_4');
});
$('.but4_2').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.faq_4').slideToggle();
    $open = $('.faq_4');
});
$('.but4_3').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.cont_4').slideToggle();
    $open = $('.cont_4');
});
$('.but4_4').click(function(){
    if($open != null)
        $open.slideToggle();
    $('.spons_4').slideToggle();
    $open = $('.spons_4');
});
});

请有人建议更好的方法来编写此代码，以便快速响应吗？

Answer 1

在可能对您有用的所有功能中添加else语句

$('.but3_1').click(function(){
if($open != null)
 {
    $open.slideToggle();
 }
 else
 {
    $('.rule_3').slideToggle();
    $open = $('.rule_3');
 }
});

JQuery代码需要花费太多时间来加载

1 个答案: