Título: Ayuda con javascript Publicado por: FGM24 en 15 Noviembre 2021, 21:12 pm Estoy haciendo una pagina web, donde el diseño para celular, tiene una barra de navegacion.
Quiero que dicha barra de navegacion se cierre al momento de hacer click en cualquier parte de la pantalla que no sea el contenedor de dicha barra, ya intente varias cosas y nada sale, el problema es que intento hacer un "if" para que solo funcione el click y remueva la clase para hacer desaparecer la barra cuando contenga la clase "show-menu"(esa es la clase que se añade para que se muestre el menu) pero no entra el if y no se porque Código: const navToggle = document.querySelector('.nav_toggle'), el primer if si entra, el que valida si existe la constante "navToggle" (que es el icono para hacer aparecer la barra) el problema es que el segundo if no entra, ya intente con else, con otro if, con else if, y nada funciona, alguna recomendacion de como hacer que funcione? Título: Re: Ayuda con javascript Publicado por: @XSStringManolo en 16 Noviembre 2021, 05:19 am No es buena idea añadir listeners cuando se cumpla una condición. En código donde en distintos momentos se cumpla una u otra, si no eliminas el listemer anterior y simplemente añades uno nuevo, se te van a acumular el listener antiguo y el nuevo.
Una de las principales diferncias entre nav.addEventListener("click" callback), y nav.onclick, es que uno añade eventos y el otro settea un evento. Es decir, de la segunda forma se eliminan todos los eventos que exisitían antes. Dependiendo del código puedes optar por el onclick o en su defecto por removeEventListener (por ejemplo cuando tienes 3 eventos, y solo quieres eliminar uno y no todos) Tu condición está mal, dices: Si (nav) { Haz } en caso contrario (nav.propiedad.otra propiedad) { } Si no existe toggle, te vas a tu else if, en el cual intentas acceder a una propiedad de toggle que 100% no existe. Aún por encima accedes a las propiedades sin saber si exite toggle sin usar el interrogante. Cuando no está claro si un elemento es inexistente, tira error al acceder a sus propiedades. En todo caso seria else if(nav?.propiedad?.otraPropiedad) También es posible que quieras capurar el click en toda la página, ya que lo que pretendes es hacer desaparecer el nav cuando se haga click fuera del nav. Para ello tienes que añadir el listener a window. Otro problema que veo es con los hijos de nav. Si tienes hijos en el nav que están por encima del nav, al hacerle click al hijo, no te salta el evento del nav (porque le haces click al hijo y no al nav directamente. Tienes que propagar el evento de hijo a padre. Es una opción de addEventListener. Si miras en la documentación de MDN de addEventListener, te explican en detalle como hacerlo y como funciona. Te dejo un ejemplo de como lo haría yo. Adáptalo para tu uso, que entiendo que quieres añadirlo a clases por si tienes varios navs y demás. O corrige los errores que te comenté. Código
Título: Re: Ayuda con javascript Publicado por: FGM24 en 24 Noviembre 2021, 21:25 pm No es buena idea añadir listeners cuando se cumpla una condición. En código donde en distintos momentos se cumpla una u otra, si no eliminas el listemer anterior y simplemente añades uno nuevo, se te van a acumular el listener antiguo y el nuevo.... Te agradezco mucho la aportacion, leere la documentacion de add event listener que me comentas, voy a intentar implementarlo de la manera que me comentas, te agradezco muchisimo :D |