Soy un programador novato, así que pido disculpas si esto no tiene sentido. Estoy desarrollando un sitio web y estoy tratando de implementar un menú de hamburguesas y un botón de cierre para salir del menú de hamburguesas. La función javascript funciona bien en el atributo de clase de una página, pero no en el mismo atributo de clase de la otra página.
Aquí está mi código
var close_popup = document.querySelector('.cancel-icon'); close_popup.addEventListener('click', function(){ document.getElementById('toggle').checked = false; });Aquí está mi código HTML
<label class="Hamburger" for="toggle">☰</label> <input type="checkbox" id="toggle"/> <!-- Navigation Bar --> <nav class="navbar"> <div class="cancel-icon" ><span>X</span></div> <a class="navlink1" href="Profile.html">Profile</a> <a class="navlink2" href="Portfolio.html">Portfolio</a> <a class="navlink3" href="Contact.html">Contact</a> </nav> </div>Aquí está el CSS
#toggle:checked + .navbar{ top: -12vh; visibility: visible; min-height: 100vh; background-color: #3A3B3C; transform: scale(1.5); transition: all 0.5s ease-in-out; }este código se asegura de que si la casilla de verificación para el menú de hamburguesas está marcada y luego la convierte en falsa. Hasta ahora funciona en una página pero no en las demás. Qué estoy haciendo mal. Gracias
Su javascript está funcionando correctamente. Al hacer clic en ".cancel-icon" se cierra el menú abierto. El principal problema es que el elemento ".cancel-icon" está oculto cuando el menú está abierto, lo que le impide hacer clic en el icono "X".
Aquí hay un ejemplo actualizado en el que reorganicé el HTML y agregué algunas reglas CSS adicionales para mantener el ícono "X" visible cuando el menú está abierto. El posicionamiento CSS se puede ajustar según sea necesario.
var close_popup = document.querySelector('.cancel-icon'); close_popup.addEventListener('click', function() { document.getElementById('toggle').checked = false; }); #toggle:checked+.navbar { top: -12vh; visibility: visible; min-height: 100vh; background-color: #3A3B3C; transform: scale(1.5); transition: all 0.5s ease-in-out; } .cancel-icon { z-index: 10; position: absolute; right: 65px; top: 5px; } .cancel-icon:hover { cursor: pointer; } <label class="Hamburger" for="toggle">☰</label> <input type="checkbox" id="toggle" /> <!-- Navigation Bar --> <nav class="navbar"> <a class="navlink1" href="Profile.html">Profile</a> <a class="navlink2" href="Portfolio.html">Portfolio</a> <a class="navlink3" href="Contact.html">Contact</a> </nav> <div class="cancel-icon"><span>X</span></div>