0

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?

6
  • Y si usas mejor removeClass Commented el 30 ago. 2021 a las 21:33
  • Fijate en el Linkeado del JS ponele defer, o asigna los event en un onload o un onready para estar seguro que econtro el boton. Commented el 30 ago. 2021 a las 21:35
  • De entrada, ya veo un problema tipográfico que podría estar relacionado. Al condicional del event listener que añade la clase, le faltan las llaves: 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.
    – Bettylex
    Commented el 30 ago. 2021 a las 21:51
  • El acceso a los elementos no es el problema, ya lo comprobe ...
    – PySanti
    Commented el 30 ago. 2021 a las 22:48
  • @FacundoE.Villagra que es un defer? (soy bastante novato en js aun)
    – PySanti
    Commented el 30 ago. 2021 a las 22:48

1 respuesta 1

0

Usa

removeClass('clase_a_remover')

esto remueve completamente la clase o también en este caso podrías usar

removeAttr('class')

eliminaras el atributo clase completamente del elemento y después podrías crearla como la necesites nuevamente

attr('class','clase_como_la_necesitas_despues_de_quitarla')

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.