菜单mouseenter mouseleave click

有人可以帮帮我吗？ 我想要一个带有动画的下拉菜单，其中包含mouseenter和mouseleave事件，但是当鼠标输入后单击时，我希望子菜单保持可见，直到页面中的任何位置新单击（在示例中仅在正文中）。 在第二次点击之后（与mouseleave相同的动画）我想要mouseenter和mouseleave .on就像我们开始时一样。

$('#menu > li').on('mouseenter',function(){ //mouseenter handler }); $('#menu > li').on('mouseleave',function(){ //mouseleave handler }); $('#menu > li').toggle( function () { $('#menu > li').off('mouseenter mouseleave'); }, function () { //mouseleave handler }); $('body').click(function(){ //same mouseleave handler }); 

我不知道如何在第二次点击后启用mouseenter / mouseleave。 对不起，谢谢。

Answer 1

使用事件委派可以大大简化这一点：

 $('document').on("click",'#menu > li', function() { $('#menu > li').off('mouseenter mouseleave'); }); $('document').on("click",':not(#menu > li)', function() { $('#menu > li').on('mouseenter', function(){ //your mouseenter handler goes here }); $('#menu > li').on('mouseleave', function(){ //your mouseleave handler goes here }); }); 

这在语义上等同于：

 If a click happens on a menu item, unbind mouse enter/leave events If a click happens on a non menu item, bind mouse enter/leave events