如何使导航项目再次处于不活动状态？

Question

我的导航栏出现问题。我试图做一个功能，当我点击一个导航项时，它展开它的子项。这工作完美。当我点击另一个导航项目时，它会折叠前一个项目并展开当前项目。这也很完美。我最近添加了一项新功能，我希望当前的导航项目能够保持它的外观，使它看起来很活跃，如果你们明白我的意思。

所有我能想出是这样的代码，它确实做了一些我想要的东西，但它不单击当前导航项目后再次提出的导航项目无效的，只有当我点击一个新的。如果有任何不清楚的地方，我会提供一个链接。

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(this).siblings().find(".inner-nav").hide(); //collapse siblings 
     $(this).siblings().find('a').attr('id', ''); //make siblings inactive 

     $(this).find(".inner-nav").toggle(); //expand current item 
     $(this).find("a").attr('id','nav-active'); //make current item active 
     $(this).find("ul").find("a").attr('id',''); //remove the nav-active ID from the current items children, as it also will appear as active, which is not the desired functionality 
    }); 
}); 

Answer 1

试试这个：

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(this).siblings().find(".inner-nav").hide(); 
     $(this).siblings().find('a').attr('id', ''); 

     $(this).find(".inner-nav").toggle(); 
     //$(this).find("a").attr('id','nav-active'); 
    if ($(this).find("a").attr('id') == 'nav-active') { 
     $(this).find("a").attr('id',''); 
    } else { 
     $(this).find("a").attr('id','nav-active'); 
    } 
     $(this).find("ul").find("a").attr('id',''); 
    }); 
}); 

我说只是简单的验证：

if ($(this).find("a").attr('id') == 'nav-active') { 
    $(this).find("a").attr('id',''); 
} else { 
    $(this).find("a").attr('id','nav-active'); 
} 

fiddle

希望，我理解你的权利。

Answer 2

我真的不能得到你的观点非常好，但让我想..当你点击任何一个孩子的崩溃整个股利。在这种情况下，你需要e.stopPropagation();

$(function(){ 
    $(".main-nav").on("click",function(){ 
     $(".inner-nav").not($(this).find(".inner-nav")).hide(); 
     $(this).find(".inner-nav").toggle(); 
    }); 
    $(".main-nav > ul > li > a").on('click' , function(e){ 
     e.stopPropagation(); 
     $(".main-nav > ul > li > a").not($(this)).attr('id' , ''); 
     $(this).attr('id' , 'nav-active'); 
    }); 
}); 

我希望这一个是你在寻找什么

Working Demo