Me gustaría abrir y cerrar la superposición con un solo botón, de modo que cuando se hace clic en el botón se agrega una clase adicional, cuando se cierra, la clase se elimina y la superposición se cierra. Hasta ahora escribí el código que abre la superposición y agrego/elimino la clase al botón. También creé el método para cerrar la superposición, pero estoy luchando por crear un evento adecuado para cerrarlo realmente, por lo que sería feliz si alguien pudiera guiarme un poco.
Creo que debería haber una declaración 'if' dentro de events() verificando si el botón tiene clase agregada, si es así, la superposición se cerrará usando esta función element.classList.contains("active");
Además, el botón está animado, por lo que cuando se agregan 3 barras de clase (icono de hamburguesa) se convierte en X y esta es la razón principal por la que no quiero tener botones separados para abrir y cerrar, ya lo logré, pero esto no es lo que quiero. estoy buscando
class OverlayNav { constructor() { this.injectHTML() this.hamburgerIcon = document.querySelector(".menu-icon") this.events() } events() { this.hamburgerIcon.addEventListener("click", () => this.overlayOpen()) } overlayOpen() { document.getElementById("myNav").style.width = "100%"; this.hamburgerIcon.classList.toggle("menu-icon--close-x") } overlayClose() { document.getElementById("myNav").style.width = "0%"; } injectHTML() { document.body.insertAdjacentHTML('beforeend', ` <div id="myNav" class="overlay"> <p>My Overlay</p> </div> `) } } export default OverlayNavPuede agregar una propiedad que realice un seguimiento del estado de la barra de navegación.
constructor() { this.injectHTML() this.hamburgerIcon = document.querySelector(".menu-icon") this.events() this.overlayVisible=true; }Luego agregue un método que cambie el estado y llame al método de apertura/cierre derecho:
toggleOverlay() { if (this.overlayVisible) this.overlayOpen(); else this.overlayClose(); this.overlayVisible=!this.overlayVisible; } Finalmente, haga que el método de events llame a toggleOverlay() en lugar de overlayOpen() .
events() { this.hamburgerIcon.addEventListener("click", () => this.toggleOverlay()) }Puede hacer una función con un identificador de instrucción if Abriendo y cerrando la superposición
Aquí está tu código editado
class OverlayNav { constructor() { this.injectHTML(); this.hamburgerIcon = document.querySelector(".menu-icon"); this.events(); } events() { this.hamburgerIcon.addEventListener("click", () => this.overlayHandle()); } overlayOpen() { document.getElementById("myNav").style.width = "100%"; this.hamburgerIcon.classList.toggle("menu-icon--close-x"); } overlayClose() { document.getElementById("myNav").style.width = "0%"; } overlayHandle() { if (element.classList.contains("active")) { this.overlayClose(); } else { this.overlayOpen(); } } injectHTML() { document.body.insertAdjacentHTML( "beforeend", ` <div id="myNav" class="overlay"> <p>My Overlay</p> </div> ` ); } } export default OverlayNav;Alternativamente, una solución pura de HTML + CSS , usando solo el elemento de details y el selector de atributo CSS [open] .
.overlay > p { padding: 1rem; margin: 0; display: flex; flex-direction: column; width: 25vw } .overlay summary { padding: 1rem 0.5rem; cursor: pointer; max-height: 90vh; overflow: auto; font-size: 4em; list-style: none; } .overlay[open] summary { background: black; color: white; padding: 0.5rem; font-size: 1em; } .overlay[open] { position: fixed; /* top: calc(50% - 25vw); */ left: calc(50% - 15vw); outline: 5000px #00000090 solid; border: 5px red solid; border-radius: 0.5rem; font-size: 1em } .overlay[open] summary::after { content: '❌'; float: right; } <details class="overlay"> <summary>☰</summary> <p> Hello world! </p> </details>