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

});
});
});