Не закрывается бургер-меню по клику на странице

Question

Подскажите, пожалуйста, как, используя чистый JS, реализовать закрытие меню по клику на контент страницы?

Данный код бургера реализован, работает нормально:

const burger = document.querySelector('#burger-icon') 
const menu = document.querySelector('.container-header__nav-block--burger')

burger.addEventListener('click', () => {
  menu.classList.toggle('open-menu')
  burger.classList.toggle('open')
})

С помощью JQuery удалось реализовать скрытие бургера по событию мыши на странице:

$(document).mousedown(function(e) {
   if (!$('#burger-icon, #burger-icon_1, #burger-icon_2, #burger-icon_3,.container-header__nav-block--burger').is(e.target) && $('.container-header__nav-block--burger').has(e.target).length === 0) {
     $('.container-header__nav-block--burger').removeClass('open-menu')
     $('.container-header__nav-block--burger').addClass('close-menu')
     $('.close-menu').hide(500)
     $('#burger-icon').removeClass('open')
 }
})

Подскажите, пожалуйста, как сделать то же самое с помощью JS? Или как переписать условие if с Jquery на JS? Это мое первое задание на JS, помогите, пожалуйста!)

Answer 1

Написал решение. Может оно и тупое, но вдруг кому-то понадобится:

document.addEventListener('mousedown', function(e) {
  if (!(e.target.classList.contains('container-header__burger-block')) &&
      !(e.target.classList.contains('burger-icon')) &&
      !(e.target.classList.contains('container-header__nav-link')) &&
      !(e.target.classList.contains('container-header__nav-list--burger'))) {
  menu.classList.remove('open-menu')
  burger.classList.remove('open')
  }
})

В условии по очереди проверяются содержание классов в элементах, которые являются исключениями из правила: бургер, список и пр. При маусдауне по всем остальным элементам - меню закрывается.

БЛОГ НА HUSL

Не закрывается бургер-меню по клику на странице

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