javascript - 如何在第二次单击时锁定功能

Question

我有一个在悬停时扩展的侧边栏。

因为展开，折叠有时会打扰我想在有人点击侧边栏时解开悬停。

底部的代码第一次用于解除绑定，但再次单击以重新启用悬停不起作用：

    $('.action').click(function(){
        $(this).unbind('mouseenter').unbind('mouseleave');
        $(this).click(function(){
            $(this).bind('mouseenter').bind('mouseleave');
        });
    });

那么如何在锁定时再次绑定悬停（如果构造，请不要）。

问候

Answer 1

$('.action').on('mouseenter mouseleave', doStuffOnHover); //initial handler

var bound = true;

$('.action').on('click', function(){
      $(this)[bound ? 'off' : 'on']('mouseenter mouseleave', doStuffOnHover);
      bound=bound ? false:true;
});

function doStuffOnHover() {
   //do stuff here
}

小提琴

如果在 mouseenter/leave 上做不同的事情，你当然需要两个函数。

Answer 2

您需要绑定实际事件.bind('mouseenter', function () { /* whatever */ });。jQuery 不会自动知道您要重新绑定已经存在的内容。如果你愿意，你可以使用一个命名函数，这样你就不必重写它。