How to get click state to override the hover state in jQuery

Question

I think this should be a simple fix, or perhaps I am going at this the wrong way.

I have an accordion menu that slides up and down on click of a button. The button that activates the the accordion has a static, hovered, and clicked state, simply changing the text color.

All works fine, unless you close an accordion menu after having scrolled down the page. The browser window moves up collapsing the accordion, but it never activates the hover off function, so the button remains in the clicked state. If you hover over the button, everything goes back to the way it should be.

Is there a way to have the click state override the hover off state, so it goes back to the static color?

Have some code. It may help explain what I am saying.

I made a fiddle here

You will not really be able to see the actual of the problem because it is all in the self-contained fiddle box.

Let me know if I can try to explain this further.

Answer 1

As Sam Dufel said, using :hover would yield better results. You can also use classes instead of setting the css property directly, that way the browser would do for you the hard job of deciding which style to show at some given moment.

.dropdown.expanded {
    color:#000;
}

.dropdown.collapsed {
    color:#BDBDBD;
}

.dropdown:hover {
    color:#6e6e6e;
}

...

// Remove the whole $.hover

if (submenu.is(":hidden")) {
    submenu.stop().slideDown('fast');
    $(this).removeClass("collapsed").addClass("expanded");
}
else {
    submenu.stop().slideUp('fast');
    $(this).removeClass("expanded").addClass("collapsed");
} 

Demo at jsFiddle.