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

Question

[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>

Comments

[0xD34F]

А давай-ка ты вопрос исправишь (3.8).

[Rys17]

0xD34F, ок

[Rys17]

0xD34F, исправил

[Владислав Лысков]

я вот скопировал твой код в песочницу, вчё работает ровно так, как ты написал
https://codepen.io/Vlatqa/pen/eYayVWV?editors=1010

[Rys17]

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

[Владислав Лысков]

Rys17, ты удаляешь и добавляешь css классы, стили которых ты должен описать
я ничего не понял что подсвечивается синим, и что должно должно происходить

[Rys17]

Владислав Лысков, ну то есть есть реакция на нажатие, но классы не добавляются.

[Владислав Лысков]

Rys17, добавляются, я же скинул ваш же код в печнице

[Rys17]

Владислав Лысков, я новичок и видимо не совсем понимаю как пользоваться песочницей, но у меня при нажатии ничего не происходит.

[Владислав Лысков]

Rys17, что должно произойти?

[Владислав Лысков]

Rys17, открываете инспектор и смотрите, что происходит при нажатии на кнопку

[Rys17]

Владислав Лысков, должны удаляться и появляться классы при нажатии на кнопку

[Владислав Лысков]

Rys17, все, я кончился, на третий раз меня не хватит

[Rys17]

Владислав Лысков, вот я нажимаю на кнопку ничего не добавляется, но классы при нажатии подсвечиваются в DOM дереве во время клика.

[Rys17]

Владислав Лысков, ну вот я в песочнице жму на кнопку и ничего не происходит. А вас всё норм?

[IvanU7n]

Rys17, из песочницы с классами:

без классов:


если локально ничего не происходит, то проблема уже в классах, а это совсем другой вопрос

[Kentavr16]

Владислав Лысков, ну как же - кончился? Как по мне то все как на стандартном митинге с клиентом )))

[Ankhena]

Rys17,

но у меня при нажатии ничего не происходит.

В песочнице нет стилей.
Допишешь - будет видно, что всё работает.

Если в своем коде руками добавляешь классы (как бы работая вместо скрипта), всё правильно функционирует?
Если да - то проверяй подключение скрипта. Оно должно быть перед закрывающим </body>
Если нет - то проверяй, что в стилях к этим классам.

[DIVSIDE]

Js подключен вначале страницы или в конце?

Answer 1

[MIXANIX]

Добавление элемента происходит не мгновенно, а с задержкой. Нужно добавить паузы между проверками или лучше всего использовать:

navList.classList.toggle("class-to-toggle", condition);

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