如何优化我的jquery代码

时间:2013-08-06 18:32:01

标签: jquery html optimization

我正在为我的大学的一个组织开发一个新的设计,我使用JQuery让我的导航栏做我想做的事情(向下滑动特定的导航项目点击,向下滑动如果点击了那个或另一个导航项目[并且如果第二种情况为真则向下滑动新的导航项目])。

相关的JQuery:

function toggleMembers() {
if ($("#members-drop-down").is(":visible")) {
    $("#members-container").animate(
    {
        opacity: "0"
    },
    600,
    function(){
        $("#members-drop-down").slideUp();
    }
);
$("#members").removeClass('active');
}
else if ($("#about-drop-down").is(":visible")) {
    $("#about-container").animate(
        {
             opacity: "0"
        },
        600,
        function(){
             $("#about-drop-down").slideUp();
        }
    );
    $("#about").removeClass('active');
    $("#members-drop-down").slideDown(600, function(){
        $("#members-container").animate(
             {
                  opacity: "1"
             },
             600
        );
    });
    $("#members").addClass('active');
}
else if ($("#store-drop-down").is(":visible")) {
    $("#store-container").animate(
        {
             opacity: "0"
        },
        600,
        function(){
             $("#store-drop-down").slideUp();
        }
    );
    $("#store").removeClass('active');
    $("#members-drop-down").slideDown(600, function(){
    $("#members-container").animate(
        {
             opacity: "1"
        },
        600
    );
    });
    $("#members").addClass('active');
}
else {
    $("#members-drop-down").slideDown(600, function(){
        $("#members-container").animate(
              {
                    opacity: "1"
              },
              600
        );
    });
    $("#members").addClass('active');
}   
}

不幸的是,我编写的JQuery占用的空间比所有HTML都多。如何缩短和优化它?

我的JSFiddle with the full code

1 个答案:

答案 0 :(得分:0)

使用以下方法之一缩小JavaScript文件: