JQuery多导航菜单问题

Question

现在我正在尝试创建一个类似于 Microsoft.com 的菜单，但我的代码遇到了一些问题。第一个问题是，当我单击一个选项卡使其处于事件状态时，它会起作用，但是当我折叠子导航备份时，事件类会保留吗？然后，当我缩小到媒体查询时，如果它在桌面版本上打开，旧的子导航仍然会显示。

这是在 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');