@Rys17

При клике на бургер меню должны добавляться классы, где ошибка?

При нажатии на бургер меню нужно чтоб выпало меню. Нажал на кнопку, удалились либо добавились нужные классы. У меня классы не меняет.

js
const navList = document.querySelector('.header__nav-list');
const navBurger = document.querySelector('.user-menu__burger');


const onNavBurgerClick = () => {
  if (navList.classList.contains('header__nav-list--active')) {
    navList.classList.remove('header__nav-list--active');
    navBurger.classList.remove('user-menu__burger--active');
  } else {
    navList.classList.add('header__nav-list--active');
    navBurger.classList.add('user-menu__burger--active');
  }
};

const navBurgerInit = () => {
  if (navBurger) {
    navBurger.addEventListener('click', onNavBurgerClick);
  }
};

navBurgerInit();

html
<nav class="header__nav">
        <ul class="header__nav-list header__nav-list--active">
          <li class="header__nav-item">
            <a class="header__nav-link header__nav__link--current" href="404.html" aria-current="page" tabindex="-1">
              Главная
            </a>
          </li>
          <li class="header__nav-item">
            <a class="header__nav-link" href="404.html">
              Каталог
            </a>
          </li>
          <li class="header__nav-item">
            <a class="header__nav-link" href="404.html">
              Доставка
            </a>
          </li>
          <li class="header__nav-item">
            <a class="header__nav-link" href="404.html">
              О нас
            </a>
          </li>
        </ul>
      </nav>

      <ul class="header__nav-user user-menu">
        <li class="user-menu__item">
          <a class="user-menu__link user-menu__link--profile" href="404.html">
            <span class="visually-hidden">Личный кабинет</span>
          </a>
          <a class="user-menu__link-text" href="404.html" >
            Войти
          </a>
        </li>
        <li class="user-menu__item">
          <a class="user-menu__link user-menu__link--basket" href="404.html">
            <span class="visually-hidden">Корзина</span>
          </a>
          <a class="user-menu__link-text" href="404.html" >
            Корзина
          </a>
        </li>
        <li class="user-menu__item">
          <button class="user-menu__burger user-menu__burger--active " aria-label="бургер меню" type="button">
            <span></span>
            <span></span>
            <span></span>
          </button>
        </li>
      </ul>
    </div>
  • Вопрос задан
  • 163 просмотра
Пригласить эксперта
Ответы на вопрос 1
@MIXANIX
Добавление элемента происходит не мгновенно, а с задержкой. Нужно добавить паузы между проверками или лучше всего использовать:
navList.classList.toggle("class-to-toggle", condition);

Здесь condition играет роль контролера: если true, то класс добавляется, а если false, то удаляется.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы