我正在为我大学的一个组织进行新设计，我已经使用 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带有完整的代码。