Блог

Главная - Вопросы по программированию - Прослушиватели событий работают только при обновлении страницы

Прослушиватели событий работают только при обновлении страницы

#javascript #responsive #addeventlistener

Вопрос:

Я знаю, что есть несколько похожих вопросов, но я прошел через них без всякой удачи. Мои прослушиватели событий (оба «щелчка») отлично работают, но только один раз, после обновления страницы. Это просто код для вывода скрытого навигационного меню на экран мобильного устройства.

Вот код JS:

 /*Menu responsive code*/
const hamburger = document.getElementById('menuIcon');
const closeMenu = document.getElementById('closeNav');
const navUL = document.getElementById('navUL');

hamburger.addEventListener('click', () =>{
    navUL.classList.toggle('show');
});


closeMenu.addEventListener('click', () =>{
    navUL.classList.toggle('hidden');
})

Опять же, эта проблема связана с javascript, а не с CSS/HTML, так как в тот раз она отлично работала (если я не ошибаюсь полностью). Также новичок в javascript.

гамбургер и closeMenu-это мои используемые иониконы / кнопки. классы show и hidden просто переводятся между 0% и 100%.

Комментарии:

1. Есть ли какие — либо ошибки в консоли, когда они выходят из строя?

2. Почему у вас два разных класса, show и hidden ? Разве не должно быть только одного класса, который вы включаете и выключаете?

3. Почему вы переключаете два различных класса, которые имеют противоположное значение друг друга? Либо show следует переключить, либо hidden , но не оба. Почему кнопка «Закрыть» переключает hidden класс, а не добавляет его или удаляет show класс?

4. Проблема, вероятно, возникает, когда в элемент добавляются оба класса.

5. @Barmar нет, ошибок консоли нет.

Ответ №1:

В вашем случае с 2 классами вам следует удалить другой класс при добавлении нового.

если вы используете только один класс, вы можете использовать toogle, но с 2 классами вы должны использовать добавление и удаление вместе. пример здесь :

 const hamburger = document.getElementById('menuIcon');
const closeMenu = document.getElementById('closeNav');
const navUL = document.getElementById('navUL');

hamburger.addEventListener('click', () =>{
    navUL.classList.add('red');
     navUL.classList.remove('blue');
});


closeMenu.addEventListener('click', () =>{
      navUL.classList.add('blue');
      navUL.classList.remove('red');
})

https://codepen.io/pen/?editors=1111

Метки: