Dropdown Menu Toggle Close

Question

I have a simple dropdown menu that works nicely but is there a way so that if you click anywhere but the ul it will toggle it closed again?

Jquery

$('.header').click(function() {
    $('.menu').toggle();
});

HTML

<a class="header" href="#">All</a>
<ul class="menu">
    <li>All</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

I think Jeremey's response here might help you out: http://stackoverflow.com/questions/714471/jquery-hide-element-when-clicked-anywhere-on-the-page — KrispyDonuts, Jun 12 '12 at 16:47

Christopher Marshall · Answer 1 · 2020-07-14T03:01:37.813

1

I would change toggle to toggleClass and add an active or open class in your css. You can also use an animation if you're using the JQuery UI. e.g.

.menu {
display:none;
}

.menu.active {
display:block;
}

then

$('.header').click(function(e) {
  $('.menu').toggleClass("active", 1000);
  if (!$('body').hasClass("menu-active")) {
    $('body').addClass("menu-active");
  }
});

$('body.menu-active').click(function(e) {
  $('.menu').removeClass("active");
  $('body').removeClass("menu-active");
});

edited Jul 14 '20 at 03:01

answered Jun 12 '12 at 16:47

Christopher Marshall

10,678
10
55
94

This doesn't work, as header exists inside the body the second line is cancelling out the first – GibsonFX Jul 14 '20 at 02:27
1

@GibsonFX Good eye on an 8 year old question. Posted an edit with a fix. Thanks! – Christopher Marshall Jul 14 '20 at 02:31
1

FYI You're missing a closing ) on line 3 – GibsonFX Jul 14 '20 at 03:00
@GibsonFX good eye again! I didn't test it but it looks right to me. Havn't touched jQuery in years. – Christopher Marshall Jul 14 '20 at 03:02

j08691 · Accepted Answer · 2020-07-14T03:58:13.417

0

How about adding:

$('.header').click(function(e) {
  e.stopPropagation();
  $('.menu').toggle();
});
$('body').click(function() {
  $('.menu').hide();
});

jsFiddle example.

edited Jul 14 '20 at 03:58

answered Jun 12 '12 at 16:46

j08691

204,283
31
260
272

This prevents it from being able to open again. – GibsonFX Jul 14 '20 at 02:12
@GibsonFX Wow old answer but it should be fixed now. – j08691 Jul 14 '20 at 03:59

Dropdown Menu Toggle Close

2 Answers2