Не работает функция закрытия бургер меню?

Question

Почему не срабатывает функция closeMenu?

const body = document.querySelector('body')
const burger = document.querySelector('.header__burger')
const burgerActive = document.querySelector('.header__burger-active')
const nav = document.querySelector('.nav')
const navActive = document.querySelector('.nav-active')

function showMenu() {
burger.classList.remove('header__burger')
burger.classList.add('header__burger-active')
nav.classList.remove('nav')
nav.classList.add('nav-active')
}
burger.addEventListener('click', showMenu)



function closeMenu() {
burgerActive.classList.remove('header__burger-active')
burgerActive.classList.add('header__burger')
navActive.classList.remove('nav-active')
navActive.classList.add('nav')
}
burgerActive.addEventListener('click', closeMenu)

Изначальная разметка:

Разметка, после срабатывания функции клика showMenu:

Ошибки в консоли + скриншот кода

Answer 1

У Вас там в целом довольно странная логика описана. Не за чем удалять класс при каждом клике и потом заменять его на другой класс, Вам просто нужно добавить/убрать на клик класс active в Вашем случае header__burger-active, nav-active и все. Для этого можно использовать element.classList.toggle().

после вызова клика и даже внутри функции closeMenu и все-равно не работает...

Мне интересно, каким образом это должно было работать, если closeMenu передается в качестве колбека в лиснер который Вы вешаете на элемент который Вы пытаетесь определить, в таком случае, внутри этого же closeMenu.

const body = document.querySelector('body')
const burger = document.querySelector('.header__burger')
const nav = document.querySelector('.nav')

function toggleMenu() {
    burger.classList.toggle('header__burger-active');
    nav.classList.toggle('nav-active');
}

burger.addEventListener('click', toggleMenu);

.nav {
    display: none;
}

.nav-active {
    display: block;
}

.header__burger-active {
    color: red;
    border: 1px solid red;
}

<div class="header_item-burger">
  <button class="header__burger">Burger button</button>
  <nav class="nav">
    <ul>
      <li>Nav item 1</li>
      <li>Nav item 2</li>
      <li>Nav item 3</li>
      <li>Nav item 4</li>
      <li>Nav item 5</li>
    </ul>
  </nav>
</div>

БЛОГ НА HUSL

Не работает функция закрытия бургер меню?

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