javascript - 单击其他元素时从子菜单项中删除事件类

Question

嗨 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 元素事件类时，您在 fiddle 中看到的方式是可以的，但是当您尝试单击其中一个子菜单项时，即使我正在单击其他 li 元素，它也会保持事件状态。

Answer 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/