Search code examples
jqueryunbindhoverintent

jQuery - unbind or rebind hoverIntent()?

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?

Solution

  • 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)