Dropdown menu item hide when click away?

Question

I have a fiddle for my project. I'm making a responsive navigation with dropdown menus. I currently have the dropdown items set to toggle when you click them. However, I'd like the dropdown to close if you click anywhere away from it.

I tried copying the code from a similar question, but it isn't working for me. I included it in the fiddle, but commented out so you can see the dropdowns work.

$(document).click(function(){
  $(".nav-dropdown").hide();
});

$(".nav-dropdown").click(function(e){
  e.stopPropagation();
});

Zibellino · Accepted Answer · 2015-08-05 15:02:53Z

2

Just put the e.stopPropagation() inside the toggle function.

Here is the working fiddle: http://codepen.io/anon/pen/MwLoKE

(If you want to have just one dropdown opened at a time, you'll also have to close the opened ones inside you toggle function.)

answered Aug 5, 2015 at 15:02

Zibellino

1,4146 gold badges26 silver badges35 bronze badges

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

2 Comments

Tania Rascia Over a year ago

Awesome!! Thank you! Works great. If you could provide a hint towards how to close one dropdown when another opens, that would also be really cool. (I'm exceedingly new to jQuery and JavaScript). Otherwise I'll be working on figuring that out.

Tania Rascia Over a year ago

I used $('.nav-dropdown').not($(this).siblings()).hide(); and it seems to work!

Collectives™ on Stack Overflow

Dropdown menu item hide when click away?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related