При клике вне меню, закрывать его..уже голову сломала..ток начила изучать js ..пока сложно(

Question

function burgerMenu(selector) {
  let menu = $(selector);
  let button = menu.find('.burger-menu_button', '.burger-menu_lines');
  let links = menu.find('.burger-menu_link');
  let overlay = menu.find('.burger-menu_overlay');

  button.on('click', (e) => {
    e.preventDefault();
    toggleMenu();
  });

  links.on('click', () => toggleMenu());
  overlay.on('click', () => toggleMenu());

  function toggleMenu() {
    menu.toggleClass('burger-menu_active');

    if (menu.hasClass('burger-menu_active')) {
      $('body').css('overlow', 'hidden');
    } else {
      $('body').css('overlow', 'visible');
    }
  }
}

burgerMenu('.burger-menu');

.menu-btn {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu-btn>span,
.menu-btn>span::before,
.menu-btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  transition-duration: .25s;
}

.menu-btn>span::before {
  content: '';
  top: -8px;
}

.menu-btn>span::after {
  content: '';
  top: 8px;
}

.menubox {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: black;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

.menu-item {
  display: block;
  padding: 12px 24px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu-item:hover {
  background-color: #CFD8DC;
  color: black;
}

#menu-toggle {
  opacity: 0;
}

#menu-toggle:checked~.menu-btn>span {
  transform: rotate(45deg);
}

#menu-toggle:checked~.menu-btn>span::before {
  top: 0;
  transform: rotate(0);
}

#menu-toggle:checked~.menu-btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu-toggle:checked~.menubox {
  visibility: visible;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div class="burger-menu">
  <input id="menu-toggle" type="checkbox" />
  <label class="menu-btn" for="menu-toggle">
      <span></span>
    </label>
  <ul class="menubox">
    <li><a class="menu-item" href="#">Головна</a></li>
    <li><a class="menu-item" href="#">Про Нас</a></li>
    <li><a class="menu-item" href="#">Блог</a></li>
    <li><a class="menu-item" href="#">Архіви</a></li>
    <li><a class="menu-item" href="#">Контакти</a></li>
  </ul>
</div>

Answer 1

Судя по стилям, меню открывается, когда активен чекбокс. Значит порядок действий такой:

Необходимо повесить обработчик клика на document, в котором нужно делать чекбокс неактивным.
Поскольку события имеют свойство всплывать, при таком подходе при нажатии на меню вышеописанное событие тоже будет срабатывать. Значит нам нужно прервать всплытие, чтобы оно не дошло до document, через stopPropagation().

Пример:

const menu = document.querySelector('.burger-menu');
const btn = document.querySelector('#menu-toggle');


menu.onclick = (e) => {
  e.stopPropagation();
}

document.onclick = (e) => {
  btn.checked = false;
}

.menu-btn {
  display: flex;
  align-items: center;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  cursor: pointer;
  z-index: 1;
}

.menu-btn>span,
.menu-btn>span::before,
.menu-btn>span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: black;
  transition-duration: .25s;
}

.menu-btn>span::before {
  content: '';
  top: -8px;
}

.menu-btn>span::after {
  content: '';
  top: 8px;
}

.menubox {
  display: block;
  position: fixed;
  visibility: hidden;
  top: 0;
  left: -100%;
  width: 300px;
  height: 100%;
  margin: 0;
  padding: 80px 0;
  list-style: none;
  background-color: black;
  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
  transition-duration: .25s;
}

.menu-item {
  display: block;
  padding: 12px 24px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  transition-duration: .25s;
}

.menu-item:hover {
  background-color: #CFD8DC;
  color: black;
}

#menu-toggle {
  opacity: 0;
}

#menu-toggle:checked~.menu-btn>span {
  transform: rotate(45deg);
}

#menu-toggle:checked~.menu-btn>span::before {
  top: 0;
  transform: rotate(0);
}

#menu-toggle:checked~.menu-btn>span::after {
  top: 0;
  transform: rotate(90deg);
}

#menu-toggle:checked~.menubox {
  visibility: visible;
  left: 0;
}

<div class="burger-menu">
  <input id="menu-toggle" type="checkbox" />
  <label class="menu-btn" for="menu-toggle">
                      <span></span>
                    </label>
  <ul class="menubox">
    <li><a class="menu-item" href="#">Головна</a></li>
    <li><a class="menu-item" href="#">Про Нас</a></li>
    <li><a class="menu-item" href="#">Блог</a></li>
    <li><a class="menu-item" href="#">Архіви</a></li>
    <li><a class="menu-item" href="#">Контакти</a></li>
  </ul>
</div>

Answer 2

Обычно я делаю как-то так:

document.addEventListener('mouseup', function (e){
    var div = document.querySelector('.some-class');
    if (div !== e.target && !div.contains(e.target)) {
        div.classList.remove('opened');
    }
});

То есть, клик не по нужному элементу что-то там закрывает.

P.S. В вопрос не вникал, это скорее общий ответ.

БЛОГ НА HUSL

При клике вне меню, закрывать его..уже голову сломала..ток начила изучать js ..пока сложно(

Ответы (2 шт):