事件侦听器仅在页面刷新时起作用

Question

我知道有几个类似的问题，但我已经费力地解决了它们，但没有任何运气。我的事件监听器（都是“点击”）工作得很好，但只有一次，在页面刷新后。这只是为移动设备屏幕滑出隐藏导航菜单的代码。

这里是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.

也是新手

hamburger 和 closeMenu 是我的离子图标 used/the 按钮。显示和隐藏类只是 translateX 在 0% 和 100% 之间。

Answer 1

在你有 2 个 classes 的情况下，你应该在添加新的 class 时删除另一个 class。

如果您只使用一个 class，您可以使用 toogle，但如果有 2 个 classes，您必须同时使用添加和删除。这里的例子：

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

事件侦听器仅在页面刷新时起作用

Event Listeners only working on page refresh

javascript

addeventlistener

responsive