jQuery - unbind or rebind hoverIntent()?

Question

I have a menu bar that displays a set of categories in an upper row.

One of the categories has a set of sub-categories.

I have a hoverIntent setup so that it will slideDown the submenu, and slideUp when the mouse leaves.

However, if I am viewing a page in this category, I would like the submenu to be visible with the active category highlighted. I would also like to make sure that when the submenu is interacted with via the mouse, it does not slideUp again once the mouse leaves.

I have tried redeclaring the hoverIntent function on the element in this page but it does not work, it is still using the previous binding. Is there any way to unbind the previous hoverIntent and make sure it uses the new one?

Answer 1

to bind and unbind the hoverIntent you should do:

// bind the hoverIntent
$("#demo1 li").hoverIntent(makeTall, makeShort)
// unbind the hoverIntent
$("#demo1 li").unbind("mouseenter").unbind("mouseleave");
$("#demo1 li").removeProp('hoverIntent_t');
$("#demo1 li").removeProp('hoverIntent_s');
// rebind the hoverIntent
$("#demo1 li").hoverIntent(makeTall, makeShort)

Answer 2

I think this is a more complete answer. It does the following:

• Any active timer is cleaned up.
• All events are cleared
• All object properties are cleared
• Uses common jQuery syntax and looks like native part of hoverIntent

Code:

(function($) {
   if (typeof $.fn.hoverIntent === 'undefined')
     return;

   var rawIntent = $.fn.hoverIntent;

   $.fn.hoverIntent = function(handlerIn,handlerOut,selector) 
    {
      // If called with empty parameter list, disable hoverintent.
      if (typeof handlerIn === 'undefined')
      {
        // Destroy the time if it is present.
        if (typeof this.hoverIntent_t !== 'undefined') 
        { 
          this.hoverIntent_t = clearTimeout(this.hoverIntent_t); 
        }
        // Cleanup all hoverIntent properties on the object.
        delete this.hoverIntent_t;
        delete this.hoverIntent_s;

        // Unbind all of the hoverIntent event handlers.
        this.off('mousemove.hoverIntent,mouseenter.hoverIntent,mouseleave.hoverIntent');

        return this;
      }  

      return rawIntent.apply(this, arguments);
    };  
})(jQuery);

Answer 3

From jQuery docs: "In the simplest case, with no arguments, .unbind() removes all handlers attached to the elements"

Answer 4

I used:

var elements = $("#main_nav li, #breadcrumb_ul li");
elements.unbind('mouseover mouseout');
delete $(elements).hoverIntent_t;
delete $(elements).hoverIntent_s;