我正在为我的大学的一个组织开发一个新的设计,我使用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。