Sé que hay algunas preguntas similares, pero las he leído sin suerte. Mis detectores de eventos (ambos "clic") funcionan muy bien, pero solo una vez, después de actualizar la página. Es solo un código para deslizar el menú de navegación oculto hacia la pantalla de un dispositivo móvil.
Aquí está el código 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'); })Nuevamente, este problema tiene que ver con el javascript, no con el CSS/HTML, ya que funciona muy bien esa vez (a menos que esté completamente equivocado). También nuevo en javascript.
hamburger y closeMenu son mis ionicons usados/los botones. las clases show y hidden solo traducenX entre 0% y 100%.
En su caso con 2 clases, debe eliminar la otra clase cuando agregue la nueva.
si está usando solo una clase, puede usar toogle pero con 2 clases, debe usar agregar y eliminar juntos. ejemplo aquí:
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'); })