Intento alternar el menú móvil, pero no puedo cerrarlo. No elimina la clase al hacer clic en el botón de menú Cerrar .
Agregar funciona bastante bien. ¿Hay algún problema con mi declaración if? Gracias por ayudarme.
El código completo está en Github
const openMenu = document.querySelector('.open-menu'); const closeMenu = document.querySelector('.close-menu'); const navList = document.querySelector('.nav-list'); const navBurger = document.querySelector('.nav-burger'); // Toggle Menu function toggleMenu() { if (navList.classList.contains('show-menu')) { navList.classList.remove('show-menu'); closeMenu.style.display = 'none'; openMenu.style.display = 'block'; } else { navList.classList.add('show-menu'); closeMenu.style.display = 'block'; openMenu.style.display = 'none'; } } navBurger.addEventListener('click', toggleMenu); <nav> <h3 class="nav-logo"><img class="logo-icon" src="https://www.coditt.com/images/LogoPlaceholder.png" alt="placeholdeer" style="width: 75px"/> Vacation</h3> <ul class="nav-list"> <li class="menu-item"><a href="#">Tours</a></li> <li class="menu-item"><a href="#">About us</a></li> <li class="menu-item"><a href="#">Contact</a></li> </ul> <a class="nav-burger" href="#"><img class="open-menu" alt="open menu" />Open menu</a> <a href="#" class="nav-burger"><img class="close-menu" alt="close menu" />Close menu</a> </nav>Use navList.classList.toggle("show-menu") .
Así que en lugar de:
function toggleMenu() { if (navList.classList.contains("show-menu")) { navList.classList.remove("show-menu"); closeMenu.style.display = "none"; openMenu.style.display = "block"; } else { navList.classList.add("show-menu"); closeMenu.style.display = "block"; openMenu.style.display = "none"; } }Debería ser:
function toggleMenu() { navList.classList.toggle("show-menu"); }EDITAR:
Como señaló Raexune, mi respuesta no estaba completa. Así que aquí hay una mejor explicación ..
<a class="nav-burger" id="open" href="#"><img class="open-menu" src="./img/menu-svgrepo-com.svg" alt="open menu"></a> <a href="#" class="nav-burger" id="close"><img class="close-menu" src="./img/close-svgrepo-com.svg" alt="close menu"></a> function toggleMenu() { navList.classList.toggle('show-menu') openMenu.style.display = 'none'; closeMenu.style.display = 'block'; } function untoggleMenu(){ navList.classList.toggle('show-menu'); openMenu.style.display = 'block'; closeMenu.style.display = 'none'; } document.getElementById('open').addEventListener('click', toggleMenu); document.getElementById('close').addEventListener('click', untoggleMenu); Esta no es realmente la mejor respuesta, todavía ... pero puedes tomar algunos puntos. Usé id en lugar de class , lo que debería ser mejor ya que class puede devolver una array , por lo que debe indicar qué instancia está manipulando. Creo que ese fue el problema con el código que no cierra el menú.
Y segundo, hay una mejor manera de usar las funciones que usé, pero lo dejé allí para que se entendiera cómo manipulé estas instancias por separado.