JQuery: popup menu will not disappear after clicking outside menu

Question

I am new to jquery and I am looking at google code to create their "More" button. I have a working atm, but the only way to reduce the drop is to click the "More" button again. Is there a way I can add to change this so that any click outside the dropdown menu closes it by itself? Thank you for understanding!

http://jsfiddle.net/rKaPN/1/

Answer 1

Bind the click to html event to capture the click made and hide it

$("html").click(function() { menu.find('.active').removeClass('active'); }); 

Then override this event in your click menu using .stopPropagation();

 menu.find('ul li > a').bind('click', function (event) { event.stopPropagation(); 

Violin: http://jsfiddle.net/rKaPN/12/

Answer 2

You can also add this, so the user does not need to click

 $("body:not(.menu)").hover(function(){ $(".menu").find('.active').removeClass('active');}) 

Answer 3

When you open the menu, create a transparent overlay div with the same width and height of the window. When you click this div, close the menu and destroy the div.

Answer 4

Instead of testing every click on an html dom element, you can bind the blur event to a specific menu item when you activate it, then turn it off when the blur event is fired. Replace these few lines:

  //displaying the drop down menu $(this).parent().parent().find('.active').removeClass('active'); $(this).parent().addClass('active'); 

with these:

  //displaying the drop down menu $('.active').removeClass('active'); $(this).parent().addClass('active'); $(this).blur(function() { $('.active').removeClass('active'); });