hiding a div by clicking off it

[1internet]

So I have a drop down menu that slides down on click, and back up on click again (slidetoggle).

But I want it to slide up if the user clicks anywhere else on the page.

The only way I can think of doing this is having a div overlay, that if they click on, it will hide the menu. Surely there is a better way. Any ideas?

[gristoi]

use the blur event in jquery

[1internet]

I tried that, no luck. It's a div, doesn't blur only work for form fields?

$("#products_nav").click(function(){
	$("#menu_tabs").slideToggle();
	$(this).blur(function(){
		$("#menu_tabs").slideUp();
	});
});

[haku]

When sliding down, you can set onclick on the page body, setting it to hide the menu in question. However, you will have to do two other things as well:

 

1) Set the event to not propagate (bubble) when the menu itself is clicked on (or else the menu will hide when you click on it)

2) Remove the onclick from the body when the menu is hidden again.