单击其他项时从子菜单项中删除活动类答案

【问题标题】：remove active class from sub menu item when other item is clicked单击其他项时从子菜单项中删除活动类
【发布时间】：2015-07-28 15:10:57
【问题描述】：

嗨here is my fiddle:

$(function(){

    $('#nav li').on('click', function(){

        $(this).addClass('active').siblings().removeClass('active');
        $(this).find('.sub-menu').addClass('showMenu');

    });
    $('ul#nav > li').hover(function(){
        if ($(this).children('ul').length > 0){    
             $(this).find('.sub-menu').addClass('showMenu');
        }
    }, function(){ 
             $(this).find('.sub-menu').removeClass('showMenu');
    });

当您单击每个主要的 li 项目活动类时，您在小提琴中看到的效果是可以的，但是当您尝试单击其中一个子菜单项时，即使我单击其他 li 项目，它也会保持活动状态。

【问题讨论】：

标签： javascript jquery html css submenu

【解决方案1】：

$(function(){

    $('#nav li').on('click', function(){

        $(this).addClass('active').siblings().removeClass('active');
        $(this).siblings().find('li').removeClass('active');//added
        $(this).find('.sub-menu').addClass('showMenu');

    });
    $('ul#nav > li').hover(function(){
        if ($(this).children('ul').length > 0){    
             $(this).find('.sub-menu').addClass('showMenu');
        }
    }, function(){ 
             $(this).find('.sub-menu').removeClass('showMenu');
    });

});

http://jsfiddle.net/Hnk9W/26/

【讨论】：

【解决方案2】：

$(function() {
$('#nav li').on('click', function() {
    $('#nav').find('.active').removeClass('active'); // remove active class in all #nav elements [added]
    $(this).addClass('active');
    $(this).find('.sub-menu').addClass('showMenu');

});
$('ul#nav > li').hover(function(){
    if ($(this).children('ul').length > 0){    
         $(this).find('.sub-menu').addClass('showMenu');
    }
}, function(){ 
         $(this).find('.sub-menu').removeClass('showMenu');
});

【讨论】：