Меню закрывается при нажатии за его пределами, но открывается только один раз

Question

Я создал складное меню и хочу, чтобы оно закрывалось, когда пользователь нажимает на тело. Я закодировал его, но он срабатывает только один раз в каждой ссылке sh. Я имею в виду, что он открывается, когда я нажимаю кнопку меню, и хорошо закрывается, когда я нажимаю на тело, но если я хочу снова открыть меню, кнопка ничего не делает.

Я пробовал addclass вместо toggleclass, но это не работает. даже я пытался toggleClass вместо removeClass, но происходило что-то худшее, каждый раз, когда я нажимаю на ТЕЛО, меню будет открываться и закрываться.

Что не так?

$(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

Проблема в том, что щелчки на элементе .menu распространяются вплоть до body, где только что добавленный класс немедленно удаляется. Ваш вложенный обработчик событий в window.click выполняет аналогичную работу, поэтому обычно следует избегать вложенного обработчика событий.

Чтобы исправить это, вам нужно добавить вызов stopPropagation() к родительскому элементу меню. , Вы также должны прикрепить обработчик первого клика, который скрывает меню, прямо на document. Попробуйте это:

$(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>