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

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

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/

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

2 个答案: