Menu closes when clicking outside it but only opens once

Question

I've created a collapsible menu and I want it to be closed when user clicks on body. I've coded it but it just work for once in every refresh. I mean it opens when I click menu button and nicely closed when I click on body but if I want to reopen the menu, button doesn't do anything.

I tried addclass instead of toggleclass but it doesn't work. even i tried toggleClass instead of removeClass but something worse had happened, every time I click on BODY, menu is going to open and close.

What's going wrong?

$(window).click(function() {
  "use strict";
  $("HTML, body").click(function() {
    $(".menu").removeClass("menu_slide");
  });
});

$(document).ready(function() {
  "use strict";
  $(".menu_button").click(function() {
    $(".menu").toggleClass("menu_slide");
  });
});

.menu_button {
  position: fixed;
  cursor: pointer;
  color: #727272;
  /*margin-top: -10vw;*/
  margin-left: 3vw;
  margin-top: 3vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
}

.slash {
  font-family: 'Montserrat-Medium';
  font-size: 4vw;
  letter-spacing: 0.5vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.menu {
  width: 50vw;
  height: 100vh;
  background-color: #D1D1D1;
  z-index: 10;
  position: fixed;
  left: -50vw;
  top: 0vh;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu_slide {
  left: 0vw;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu ul {
  position: absolute;
  left: 20vw;
  top: 18vw;
}

.menu ul li {
  font-family: 'Montserrat-Light';
  font-size: 1.5vw;
  line-height: 2vw;
  letter-spacing: 0.3vw;
  color: #1C1C1C;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu_button">
  <div class="slash">///</div>
</div>
<div class="menu">
  <ul>
    <li>About /</li>
    <li>CV /</li>
    <li>Photos /</li>
    <li>Videos /</li>
    <li>Contact /</li>
  </ul>
</div>

Answer 1

The issue is because the clicks on the .menu element are propagating up to the body where the class you just added gets immediately removed. Your nested event handler within window.click is doing a similar job, which is why nested event handler should generally be avoided.

To fix this you need to add a stopPropagation() call to a parent element of the menu. You should also only attach the first click handler, which hides the menu, directly on the document. Try this:

$(document).click(function() {
  $(".menu").removeClass("menu_slide");
});

$(document).ready(function() {
  $(".menu_button").click(function() {
    $(".menu").toggleClass("menu_slide");
  });
  
  $('.menu-container').on('click', function(e) {
    e.stopPropagation();
  });
});

.menu_button {
  position: fixed;
  cursor: pointer;
  color: #727272;
  /*margin-top: -10vw;*/
  margin-left: 3vw;
  margin-top: 3vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
}

.slash {
  font-family: 'Montserrat-Medium';
  font-size: 4vw;
  letter-spacing: 0.5vw;
  text-shadow: 2px 1.5px 2px #0C0C0C;
  z-index: 200;
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}

.menu {
  width: 50vw;
  height: 100vh;
  background-color: #D1D1D1;
  z-index: 10;
  position: fixed;
  left: -50vw;
  top: 0vh;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu_slide {
  left: 0vw;
  -moz-transition: 0.8s ease-in-out;
  -o-transition: 0.8s ease-in-out;
  -webkit-transition: 0.8s ease-in-out;
  transition: 0.8s ease-in-out;
}

.menu ul {
  position: absolute;
  left: 20vw;
  top: 18vw;
}

.menu ul li {
  font-family: 'Montserrat-Light';
  font-size: 1.5vw;
  line-height: 2vw;
  letter-spacing: 0.3vw;
  color: #1C1C1C;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-container">
  <div class="menu_button">
    <div class="slash">///</div>
  </div>
  <div class="menu">
    <ul>
      <li>About /</li>
      <li>CV /</li>
      <li>Photos /</li>
      <li>Videos /</li>
      <li>Contact /</li>
    </ul>
  </div>
</div>