菜单mouseenter mouseleave单击 [英] menu mouseenter mouseleave click

问题描述

有人可以帮助我吗?我想要一个带有关于mouseenter和mouseleave事件的动画的下拉菜单，但是在鼠标进入后单击时，我希望子菜单保持可见，直到页面中的任何位置再次单击(在示例中仅在正文中).在第二次单击(mouseleave的相同动画)之后，我希望像我们开始时一样再次mouseenter和mouseleave.

Anyone can help me? I want a dropdown menu with animation on mouseenter and mouseleave events but when clicked after mouse enter I want the submenu stay visible until new click anywhere in page (in the example is only in the body). After that second click (same animation of mouseleave) I want mouseenter and mouseleave .on again like when we started.

$('#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.抱歉，谢谢.

I don't know how i can enable mouseenter/mouseleave after second click. Sorry, and thanks.

推荐答案

使用事件委托可以大大简化此操作:

This could be significantly simplified using event delegation:

$('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

这篇关于菜单mouseenter mouseleave单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！