Jquery: drop down menu wont disappear after clicking outside of menu

Question

I'm new to jquery and I'm looking at google's code to create their 'More' button. I've got it working atm but the only way to make the drop down disappear is to click the 'More' button again. Is there a method I can add to change this so that any click outside of the drop down menu itself will close it? Thanks for the insight!

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

Answer 1

Bind a click event to html to capture any click made, and make it hide the menu

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

Then override that on your menu's click event using .stopPropagation();

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

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

Answer 2

You could add this too , so the user don't have to click

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