Question

I have a sidebar which expands on hover.

Because expanding, collapsing can disturb sometimes I want to unbind the hovering when someone clicks on the sidebar.

The code at the bottom works for unbinding the first time but the second click to reenable the hovering again doesn’t work:

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

So how can I bind the hovering again when locked (please no if construction).

Regards

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
}

FIDDLE

If doing different things on mouseenter/leave, you will of course need two functions.