私は自分の大学の組織の新しいデザインに取り組んでおり、JQuery を使用して、ナビゲーション バーがやりたいことを実行できるようにしました (特定のナビゲーション項目のクリックで下にスライドし、それまたは別のナビゲーション項目がクリックされた [2 番目のケースが true の場合、新しいナビゲーション項目を下にスライドさせる])。
関連する 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 。