单击其他项目时从子菜单项中删除活动 class

Question

$(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 项目处于活动状态时，您在 fiddle 中看到的方式 class 没问题，但是当您尝试单击其中一个子菜单项时，它仍然处于活动状态，即使我是点击其他 li 项。

Answer 1

$(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');
});

Answer 2

$(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/

单击其他项目时从子菜单项中删除活动 class

remove active class from sub menu item when other item is clicked

html

javascript

css

jquery

submenu