How to add/remove CSS class to parent element in jQuery dropdown menu

Question

I have this fiddle: http://jsfiddle.net/tatygrassini/tZBXe/

Horizontal dropdown menu with a 1 level deep submenu. All menu links with :hover styles.

Once parent clicked, submenu slides down, you hover out, submenu hides back, OK so far.

I want to give the parent Add/Remove my CSS class a CSS class (.focus), when clicked to change its background color to fake a "focus" state.

In the jsfiddle, when you click on the Add/Remove my CSS class, you'll see it changes its background-color to red for a second, this is because of the :active CSS style.
So, even when you hover on the submenu links, the parent link remains in "focus" state, but, when you hover out, the "focus" CSS class will be removed to achieve its normal state CSS.

Manuel van Rijn · Accepted Answer · 2011-11-22 15:14:46Z

2

here's an updated code: http://jsfiddle.net/manuel/tZBXe/2/ I've added

$(this).addClass("focus");

and in the hover function

$("a", this).removeClass("focus");

answered Nov 22, 2011 at 15:14

Manuel van Rijn

10.3k1 gold badge33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add/remove CSS class to parent element in jQuery dropdown menu

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related