点击后如何关闭我的切换菜单？

Question

当我点击时，我正在努力让下拉关闭。

只有在点击父级时才会关闭。

$("#nav > ul > li").on('click', function(){
    $(this).toggleClass('active');
});

http://jsfiddle.net/2mRwb/3/

在这种情况下，最佳解决方案是什么？

Answer 1

添加以下事件处理程序

$("#nav > ul > li > ul").on("mouseleave", function(){
    $(this).parent().toggleClass('active');
});

DEMO

Answer 2

Working Demo

检查jQuery mouseup / mousedown 事件。

$("#nav > ul > li").on('click', function(){
    $(this).toggleClass('active');
});

$(document).on('mouseup',function(e){

    $('li.active').removeClass('active');

});

Answer 3

这是你如何做到的

$('#nav > ul > li').on({
    mouseenter: function() {
        $('a', this).addClass('hover');
    },
    mouseleave: function() {
        if (! $(this).hasClass('active') )
            $('a', this).removeClass('hover');
    },
    click: function(){
        $('.active').not(this).removeClass('active');
        $('.hover').not( $(this).find('a') ).removeClass('hover');
        $(this).toggleClass('active');
    }
});

$(document).on('click', function(e) {
    if ( $(e.target).closest('#nav .active').length === 0 )
        $('.active').removeClass('active').find('a').removeClass('hover');
});

FIDDLE

修正了一些其他问题