Forums

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

kgscott284

Well, instead of going through all the trouble to remember the last item clicked, why not just check to see if any element is currently active, then hide as necessary? It is a quick and dirty, but effective method.

http://codepen.io/pen/7285/1

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?

kgscott284

Yes it would, so to combat $('.dropdown-button.active').removeClass("active"); being fired to the DOM every time the document is clicked, we can use the following simple remedy:

http://jsfiddle.net/LCk6N/

:)

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/

kgscott284

Yes, but as far as best practice, where is the logic in trying to remove an element that doesn't exist, unless it exists...but it wouldn't hurt to cache it anyhow i suppose.

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.

treehouse : what would you like to learn today?

Forums

Best practice: Remove active state from dropdown menu