jQuery, make dropdown menu hide when click elsewhere

Question

I'm using jQuery to make a simple drop down menu:

<script>                    
  $("#optionsLink").click(function(){                   
    $("#optionsMenu").slideToggle();
  });
</script>

It works fine but I would like the menu to disappear when the user clicks elsewhere on the screen. A bit like your standard windows drop down menu. Clicking on "File" in my browser will display the drop down menu but clicking somewhere else, anywhere on a page for example, will hide the menu.

How would I go about implementing something like this?

can you share the HTML of the menu, and related CSS / JS ? A jsfiddle would be great! jsfiddle.net — msturdy
– msturdy, Commented Sep 11, 2013 at 20:32
@msturdy There's really no need to show HTML because one can infer that #optionsMenu is the menu and the rest of the question just refers to jQuery. — evan.stoddard
– evan.stoddard, Commented Sep 11, 2013 at 20:34

Sergio · Accepted Answer · 2013-09-11 20:43:22Z

4

Just use

$("#optionsLink").click(function(e){
  $("#optionsMenu").slideToggle();
  e.stopPropagation(); 
});

$(document).click(function(){                   
  $("#optionsMenu").slideUp();
});

"slideToggle" would toggle the menu every time you click anywhere and I don't think that's what you want

.stopPropagation() will prevent the event from bubbling up to the document when you click inside of the #optionsLink

edited Sep 11, 2013 at 20:43

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

answered Sep 11, 2013 at 20:34

Adassko

5,36326 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Juicy Over a year ago

Your solution works, but clicking within #optionsMenu also slides #optionMenu up. How could I change that to "document except #optionsMenu".click -> slideUp ?

Adassko Over a year ago

just use stopPropagation on $('#optionsMenu') as well

Sergio · Accepted Answer · 2013-09-11 21:10:55Z

2

Try this:

$("#optionsLink").click(function(){                   
    $("#optionsMenu").slideToggle();
  });
//new part
$(':not(#optionsLink, #optionsLink *)').click(function() {
    $("#optionsMenu").slideUp();
});

Targeting #optionsLink means you just have one drop-down. If you would have more you should hava class instead, maybe like .optionsLink.

edited Sep 11, 2013 at 21:10

answered Sep 11, 2013 at 20:32

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

2 Comments

Juicy Over a year ago

I tried your proposed solution, but now when I click on #optionsLink it displays #optionsMenu but #optionsMenu automatically slides up as soon as it's finished sliding down. I'm very new to jQuery, but doesn't your code tell him to slide up when #optionsLink is not being clicked?

Sergio Over a year ago

@user2018084, the :not(#optionsLink) means all elements besides #optionsLink. Try my updated answer.

Collectives™ on Stack Overflow

jQuery, make dropdown menu hide when click elsewhere

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related