Best practice: Remove active state from dropdown menu

[littleGiant]

Hi,
I am searching for the best way to remove the active state from a dropdown menu that appears when a user clicks a certain button. I use jQueries toggleClass method to show/hide the menu on click. But what about removing the active class when the user clicks somewhere else on the page? I prepared a jsfiddle for you to illustrate my question: http://jsfiddle.net/RU83L/.

A solution that comes to my mind is to always remember the last element clicked. Then I could use $(document).click() to remove my “active” class from the element clicked lately. I am just wondering whether there is a cleaner solution?

Greeting,
Daniel

[littleGiant]

That is indeed a better solution than remembering the last element clicked. Thank you kgscott.

I adapted your solution so a click on the document removes the “active” class on the button. You have to keep event bubbeling in mind though. Without event.stopPropagation(); both handlers would be fired in sequence, resulting in an immediate removal of the active class (document handler is fired second) just after its addition (button handler is fired first).

http://jsfiddle.net/RU83L/4/

However, could this be refered to as best practise? Now every click causes a query for “.dropdown-button.active” within the DOM, right?

[littleGiant]

Hm, maybe I misunderstood what jQuery() actually does. I thought it searches the DOM using the given selector and returns a set of fitting jQuery objects. If that is true $('.dropdown-button.active').hasClass("active") will cause a search in the DOM just as $('.dropdown-button.active').removeClass("active") does. So a DOM search will be performed in both solutions when a click on the document is registered (in your example even twice).

Or am I missing something elemental?

[instantMash]

My understanding is that if you cache $(‘.dropdown-button.active’) as a variable, that will prevent jQuery from diving back into the DOM.

http://jsfiddle.net/mGAs4/2/

[littleGiant]

Maybe not a bad idea to cache all .dropdown-buttons first and to use these as context for new .active queries within $(document).click().

http://jsfiddle.net/mGAs4/3/

Currently I do not see a better/easier solution. Thank you for your thoughts!

[sBowers]

We do something similar with a navigation bar. But we test to see if you are clicking inside first.

//Hide the Header Tool Bar when you click out

var mouse_is_inside_toolbar = false;



$('.global-nav').hover(function(){

mouse_is_inside_toolbar=true;

}, function(){

mouse_is_inside_toolbar=false;

});



$("body").mouseup(function(){

if(! mouse_is_inside_toolbar) {

hide_global_nav();

}

});

[littleGiant]

I tried to apply you solution to my example where more than one button could appear within the DOM. Don’t know if it is worth the effort though, it just feels cumbersome.

Solution 1: Remembering the previously clicked button
http://jsfiddle.net/mGAs4/4/

Solution 2: Removing active states recklessly
http://jsfiddle.net/mGAs4/5/

I think this topic is not really interesting in terms of performance, but I was just wondering how others would approach this problem.

[Author]

Posts