Estoy haciendo una pagina (el archivo index esta en pagina/html/html_initial_page
), y quiero que el sidebar
se cierre cuando se le de click
al close_btn
, el caso es que dentro del JS para el sidebar
...
"use strict";
const sidebar = document.getElementsByClassName("sidebar")[0];
const eventual_class_name = "sidebar_desplieged";
const sideBarElementsContainerClassName = "sidebar_elements_container"
let close_btn = null;
const closeBtnClassName = "close__btn";
function getCloseButton() {
let sideBarElementsContainer = null;
for (let child of sidebar.children){
if (child.classList.contains(sideBarElementsContainerClassName)){
sideBarElementsContainer = child;
for (let element of sideBarElementsContainer.children){
if(element.classList.contains(closeBtnClassName)){
return element;
}
}
}
}
};
close_btn = getCloseButton();
console.log(close_btn);
sidebar.addEventListener("click", () => {
if (!sidebar.classList.contains(eventual_class_name))
sidebar.classList.add(eventual_class_name);
});
close_btn.addEventListener("click", () => {
sidebar.classList.remove(eventual_class_name);
})
Por alguna razon esto solo ocurre en el bloque del eventListener
de close_btn
, a lo que me refiero es que literalmente copio y pego la misma linea en el bloque del eventListener
del sidebar
y si funciona. Ya logre arreglarlo, simplemente aplique estilos de otro modo (sin usar clases), sin embargo ahora mi pregunta es: por que paso esto?
sidebar.addEventListener("click", () => { if (!sidebar.classList.contains(eventual_class_name)) { sidebar.classList.add(eventual_class_name); } });
Pero la verdad es que creo que no es lo único que puede fallar. También deberías comprobar que la clase existe antes de intentar quitarla con el close btn. No he comprobado más cosas porque no has montado un fiddle fácilmente manipulable, pero es posible que haya más errores.