Question

现在我正在尝试创建一个类似于Microsoft.com的菜单，但我的代码存在一些问题。第一个问题是，当我单击一个选项卡使其处于活动状态时，它可以工作，但是当我手风琴时，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');

JQuery多导航菜单问题

1 个答案: