JQuery多導航菜單問題

Question

現在我正在嘗試創建一個類似於Microsoft.com的菜單，但我的代碼存在一些問題。第一個問題是，當我點擊一個選項卡使其處於活動狀態時，它可以工作，但是當我使用手風琴時，subnav支持活動課程保留下來？然後，當我縮小到媒體查詢時，如果在桌面版本上打開，則舊的subnav仍會顯示。

這裏是查看它的jsfiddle here

下面的鏈接，是主要的jQuery代碼：

$(document).ready(function(){ 
$("#one").click(function (e){ 
$(".innerMenu2").slideUp(0);  
$(".innerMenu3").slideUp(0); 
$(".innerMenu4").slideUp(0); 
$(".innerMenu5").slideUp(0);   
$(".innerMenu").slideToggle("fast"); 
}); 

$("#two").click(function (e){ 
$(".innerMenu3").slideUp(0);  
$(".innerMenu4").slideUp(0); 
$(".innerMenu5").slideUp(0); 
$(".innerMenu").slideUp(0);  
$(".innerMenu2").slideToggle("fast"); 
e.preventDefault(); 
}); 

$("#three").click(function (e){ 
$(".innerMenu4").slideUp(0);  
$(".innerMenu5").slideUp(0); 
$(".innerMenu").slideUp(0); 
$(".innerMenu2").slideUp(0);   
$(".innerMenu3").slideToggle("fast"); 
e.preventDefault(); 
}); 

$("#four").click(function (e){ 
$(".innerMenu5").slideUp(0);  
$(".innerMenu").slideUp(0); 
$(".innerMenu2").slideUp(0); 
$(".innerMenu3").slideUp(0);   
$(".innerMenu4").slideToggle("fast"); 
e.preventDefault(); 
}); 

$("#five").click(function (e){ 
$(".innerMenu").slideUp(0); 
$(".innerMenu2").slideUp(0); 
$(".innerMenu3").slideUp(0); 
$(".innerMenu4").slideUp(0);   
$(".innerMenu5").slideToggle("fast"); 
}); 

/* Mobile Navigation Menu */ 
$("#mobileLink").click(function (e){ 
$(".mobileInner2").slideUp(0); 
$(".mobileInner3").slideUp(0); 
$(".mobileInner4").slideUp(0); 
$(".mobileInner5").slideUp(0);  
$(".mobileInner").slideToggle("fast"); 
}); 

$("#mobileLink2").click(function (e){ 
$(".mobileInner3").slideUp(0); 
$(".mobileInner4").slideUp(0); 
$(".mobileInner5").slideUp(0); 
$(".mobileInner1").slideUp(0);  
$(".mobileInner2").slideToggle("fast"); 
}); 

$("#mobileLink3").click(function (e){ 
$(".mobileInner4").slideUp(0); 
$(".mobileInner5").slideUp(0); 
$(".mobileInner1").slideUp(0); 
$(".mobileInner2").slideUp(0);  
$(".mobileInner3").slideToggle("fast"); 
}); 

$("#mobileLink4").click(function (e){ 
$(".mobileInner5").slideUp(0); 
$(".mobileInner1").slideUp(0); 
$(".mobileInner2").slideUp(0); 
$(".mobileInner3").slideUp(0);  
$(".mobileInner4").slideToggle("fast"); 
}); 

$("#mobileLink5").click(function (e){ 
$(".mobileInner1").slideUp(0); 
$(".mobileInner2").slideUp(0); 
$(".mobileInner3").slideUp(0); 
$(".mobileInner4").slideUp(0);  
$(".mobileInner5").slideToggle("fast"); 
}); 
}); 


/* Function that toggles active classes for the navigation tabs */ 
$(function() { 
$('.navigation ul li').click(function (e) { 
e.preventDefault(); 
$(this).closest('li').addClass('active').siblings().removeClass('active'); 
}); 
}); 

Answer 1

更換.addClass()與toggleClass()。

這應該做你需要的東西：

$(this).closest('li').toggleClass('active').siblings().removeClass('active');