Close nav by clicking outside the toggle switch

Question

I've been fiddling around with this for a while, but can't really make it work as supposed to... So, I would like to close the navigation when I click outside the toggle button, I have tried few solutions with stopPropagation() but didn't really understand how it works. Could someone please provide a solution and maybe a brief explanation how this should be implemented? Thanks a lot for any help!

I have tried the solution with stopPropagation from

Click outside menu to close in jquery

but it works only the first time, and after it hides the menu it does not toggle again..

$(".app-toggle-menu").on('click', function() {
      $(".app-main-navigation").toggleClass("app-main-navigation--expanded");
});

$('html').click(function() {
   $(".app-main-navigation").hide();
});

$('.app-toggle-menu').click(function(event){
   event.stopPropagation();
});

.app-main-navigation {
  background: grey;
  display: none;
}

.app-main-navigation--expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="app-toggle-menu">
  toggle
</button>

<nav class="app-main-navigation">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</nav>

Possible duplicate of [How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) — GreyRoofPigeon, Mar 09 '18 at 13:49

score 3 · Accepted Answer · answered Mar 09 '18 at 13:52

Use jQuery's removeClass() method instead of hide().

$(".app-toggle-menu").on('click', function() {
      $(".app-main-navigation").toggleClass("app-main-navigation--expanded");
});

$('html').not(".app-toggle-menu").click(function() {
   $(".app-main-navigation").removeClass("app-main-navigation--expanded");
});

$('.app-toggle-menu').click(function(event){
   event.stopPropagation();
});

.app-main-navigation {
  background: grey;
  display: none;
}

.app-main-navigation--expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="app-toggle-menu">
  toggle
</button>

<nav class="app-main-navigation">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</nav>

score 2 · Answer 2 · answered Mar 09 '18 at 13:47

You can do it like this:

$(".app-toggle-menu").on('click', function() {
      $(".app-main-navigation").toggle();
});

$('html').click(function() {
   $(".app-main-navigation").hide();
});

$('.app-toggle-menu').click(function(event){
   event.stopPropagation();
});

.app-main-navigation {
  background: grey;
  display: none;
}

.app-main-navigation--expanded {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="app-toggle-menu">
  toggle
</button>

<nav class="app-main-navigation">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</nav>

score 2 · Answer 3 · answered Mar 09 '18 at 13:49

You have hidden it and after that you never show it again. You are toggling the class that makes it expanded but that doesn't mean anything since it is not visible.

Call $(".app-main-navigation").show(); before you toggle it.

$(".app-toggle-menu").on('click', function() {
   $(".app-main-navigation").show();
   $(".app-main-navigation").toggleClass("app-main-navigation--expanded");
});

Close nav by clicking outside the toggle switch

3 Answers3