menu - 带有 mouseenter、mouseleave 和单击以保持打开关闭的菜单

Question

我有这个正在使用 mouseenter/mouseleave 的菜单，当单击该项目时，该项目将保持打开状态，如果我单击正文，该项目将被关闭，当单击另一个项目时，它将被打开。问题是：我想在单击他时关闭打开的项目，但是使用此代码我无法做到。我只是尝试切换和许多其他事情，但我无法实现我想要的。

function handler() {
$('#menu > li').on('mouseenter',function(){
    //mouseenter handler
});    
$('#menu > li').on('mouseleave',function(){
    //mouseleave handler
});}

$('#nav-outer').on('mouseenter mouseleave', handler);


$('#menu > li').on('click', function( e ) {
  e.stopPropagation();
       $('#menu > li').off('mouseenter mouseleave');
       $('#nav-outer').off('mouseenter mouseleave', handler);
        $('#overlay').show();
       });

$('body').click(function(){
  $('#overlay').hide();
  $('#nav-outer').bind('mouseenter mouseleave', handler);
  $('#menu > li').find //etc. like mouseleave handler
  $('#menu > li').bind('mouseenter',function(){ //etc. like mouseenter handler

});
});
});