Quiero hacer clic en btnToggle , la navegación se ejecutará, pero no sé por qué este código a veces tiene éxito, a veces no tiene éxito.
Ayúdenme por favor, gracias a todos
const nav = document.querySelector(".header-nav"); const btnToggle = document.querySelector(".header__btn-toggle"); document.addEventListener("click", (e) => { if (e.target.className == "header__btn-toggle") { nav.style.right = "0"; // right to left } else { nav.style.right = "-100%"; //left to right } }) <header class="header"> <a href="#" class="header__logo"> <img src="./assets/logo.png" alt="Tvelia"> </a> <ul class="header-nav"> <a href="#" class="header-nav__item header-nav__item--active">Home</a> <a href="#" class="header-nav__item">Adventures</a> <a href="#" class="header-nav__item">About</a> <a href="#" class="header-nav__item">Contact</a> <a href="#" class="header-nav__item">Login</a> <a href="#" class="header-nav__item">Signup</a> </ul> <div class="header__btn-toggle"> <div></div> <div></div> <div></div> </div> </header>Primero, debe adjuntar addEventListener a btnToggle y no a document .
Estás bastante cerca. Debido a que adjuntó el detector de eventos al documento , su función de devolución de llamada se ejecutará si hace clic en cualquier parte de la página. Y debido a que los navegadores tienen algo llamado burbujeo de eventos, esa podría ser la causa de sus inconsistencias.
En su lugar, debe colocar el detector de eventos solo en el botón. Yo lo haría así:
const nav = document.querySelector(".header-nav"); const btnToggle = document.querySelector(".header__btn-toggle"); btnToggle.addEventListener("click", () => { nav.style.right = "0" }) const moveNavRight = (e) => { if (e.target !== btnToggle) nav.style.right = "-100%" } // If you wanted to change the hide effect to only work when you click the nav // (not anywhere on the page), you would change the following line to // nav.addEventListener("click", moveNavRight) document.addEventListener("click", moveNavRight)Aquí, extraje moveNavRight a una función separada para un poco más de claridad. Entonces, cómo funcionaría este código es: si hace clic en btnToggle, la navegación se moverá a la derecha 0. Pero si hace clic en la página/documento en cualquier otro lugar, la navegación se moverá a la derecha -100%.
¡Espero que esto sea lo que estabas buscando!