CODEWITHSUNDEEP
jqueryhtmlcss
trying_hal9000
trying_hal9000

Reputation: 4403

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

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/

Upvotes: 4

Views: 3677

Answers (4)

Andy Rose
Andy Rose

Reputation: 16974

Rather than testing every click on the html dom element you could bind a blur event to the specific menu item when you make it active to then switch 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');
  });

Upvotes: 0

GregM
GregM

Reputation: 2654

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

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

Upvotes: 1

jbabey
jbabey

Reputation: 46647

On opening of the menu, create a transparent overlay div of the same width and height of the window. On click of that div, close the menu and destroy the div.

Upvotes: 0

Alex Peattie
Alex Peattie

Reputation: 27647

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/

Upvotes: 7

Related Questions