2

任何人都可以帮助我吗?我想要一个在 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。对不起,谢谢。

4

1 回答 1

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
于 2012-11-27T14:19:29.533 回答