0

我已经建立了一个简单的手风琴式侧面菜单，看着它，它的功能相当沉重。如果有的话，我可以学习哪些方法来减少代码量和执行时间？

我主要是问这个作为一个学习点。

$('#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);
      }
});
4

3 回答 3

2

您将通过创建一个可用于每个单击事件处理程序的回调函数来摆脱大部分代码，因为它们是相同的，除了选择器。这样你就不需要重复很多代码。它变得更容易维护，更不容易出错并且占用更少的空间。

于 2012-10-30T12:31:43.617 回答
1

缓存元素，例如：

  if ($('#one').hasClass("extended")) {
    $('#one').stop(true, true).animate({height: '22px'},500);
    $('#one').removeClass("extended");

改成：

var one = $('#one');
  if (one.hasClass("extended")) {
    one.stop(true, true).animate({height: '22px'},500);
    one.removeClass("extended");
....
...

另一个提示是变量名称。不要命名元素one,two, t1, a2
给元素和变量起有意义的名字。

于 2012-10-30T12:31:19.733 回答
1

为了避免使用特定 ID 重复相同的代码，要学习的最重要的事情是将通用类名添加到小部件或模块的不同组件中。

这使您能够运行 saem 代码来处理页面中小部件的多个实例

简化示例，因为我看不到您的标记以知道每个 ID 代表什么

$('.myMainWidgetClass').click(function(){
      var $thisWidget=$(this) ; /* store this instance of widget */
       /* remove active class on all the other main widgets*/
      $('.myMainWidgetClass.activeClass').removeClass('activeClass'); 
      /* add the active class to this instance*/
      $thisWidget.addClass('activeClass');  

     /* use find() to target elements only in this instance*/
      $thisWidget.find('.someSubClass').css('color','blue');
     /* to affect previous or next main widget assuming they are next element in page*/
      $thisWidget.prev().doSOmthing();/* or next()`

     /* get the index of this widget compared to all the same widgets in page*/         
       var thisIndex= $('.myMainWidgetClass').index(this) 

})

一旦你开始使用这些概念，就有很多方法可以基于遍历、索引等来定位选择器，以编写更通用的代码

于 2012-10-30T12:46:02.053 回答