我已经建立了一个简单的手风琴式侧面菜单,看着它,它的功能相当沉重。如果有的话,我可以学习哪些方法来减少代码量和执行时间?
我主要是问这个作为一个学习点。
$('#one').css("height", "22");
$('#dtwo').css("height", "22");
$('#three').css("height", "22");
$('#t1').click(function() {
if ($('#one').hasClass("extended")) {
$('#one').stop(true, true).animate({height: '22px'},500);
$('#one').removeClass("extended");
$('#a1').stop(true, true).animate({opacity: '1'},500);
} else {
$('#one').animate({height: '120' + 'px'},500);
$('#one').addClass("extended");
$('#a1').animate({opacity: '0'},300);
}
});
$('#t2').click(function() {
if ($('#dtwo').hasClass("extended")) {
$('#dtwo').stop(true, true).animate({height: '22px'},500);
$('#dtwo').removeClass("extended");
$('#a2').stop(true, true).animate({opacity: '1'},500);
} else {
var height = 0;
$(this).closest("div").children().each(function(){
height += $(this).outerHeight(true);
});
$('#dtwo').animate({height: height + 5 + 'px'},500);
$('#dtwo').addClass("extended");
$('#a2').animate({opacity: '0'},300);
}
});
$('#t3').click(function() {
if ($('#three').hasClass("extended")) {
$('#three').stop(true, true).animate({height: '22px'},500);
$('#three').removeClass("extended");
$('#a3').stop(true, true).animate({opacity: '1'},500);
} else {
$('#three').animate({height: '270px'},500);
$('#three').addClass("extended");
$('#a3').animate({opacity: '0'},300);
}
});
$('#a1').click(function() {
if ($('#one').hasClass("extended")) {
$('#one').stop(true, true).animate({height: '22px'},500);
$('#one').removeClass("extended");
$('#a1').stop(true, true).animate({opacity: '1'},500);
} else {
$('#one').animate({height: '120px'},500);
$('#one').addClass("extended");
$('#a1').animate({opacity: '0'},300);
}
});
$('#a2').click(function() {
if ($('#dtwo').hasClass("extended")) {
$('#dtwo').stop(true, true).animate({height: '22px'},500);
$('#dtwo').removeClass("extended");
$('#a2').stop(true, true).animate({opacity: '1'},500);
} else {
$('#dtwo').animate({height: '120px'},500);
$('#dtwo').addClass("extended");
$('#a2').animate({opacity: '0'},300);
}
});
$('#a3').click(function() {
if ($('#three').hasClass("extended")) {
$('#three').stop(true, true).animate({height: '22px'},500);
$('#three').removeClass("extended");
$('#a3').stop(true, true).animate({opacity: '1'},500);
} else {
$('#three').animate({height: '270px'},500);
$('#three').addClass("extended");
$('#a3').animate({opacity: '0'},300);
}
});