0

Tengo esta lista de titulos en la cual seleccionas uno y se depliega otra lista de subtitulos , mi pregunta es como puedo hacer para que cuando se seleccione un subtitulo dentro de la lista, al recargar la pagina se siga mostrando la lista desplegada y el subtitulo seleccionado marcado ya se de otro color o que resalte.

Importante: Que al recargar la pagina por darle clic a un subtitulo la lista desplegada se siga mostrando con el subtitulo seleccionado, en caso de que no se seleccione ningun subtitulo al recargar la pagina todas las listas se contraigan.

Espero puedan ayudarme, Gracias.

$("label.title-item").click(function() {
    // Obtener el elemento que se debe mostrar u ocultar
    let desplegable = $(this).next(".desplegable-1");
    // Saber si se tiene que mostar u ocultar
    let mostrar = !desplegable.hasClass('active-desp');
    // Ocultar todos los desplegables
    $(".desplegable-1").removeClass("active-desp");
    // Mostrar u ocultar el actual
    if(mostrar) {
        desplegable.addClass('active-desp');
    } else {
        desplegable.removeClass('active-desp');
    }
});

$("label.title-sub").click(function() {
    // Buscar el siguiente elemento por clase
    $(this).next(".desplegable-2").toggleClass("active-desp2");
});

const currentLocation = location.href;
        const menuItem= document.querySelectorAll("a.sub-title-item");
        const menuLength = menuItem.length
        for(let i=0; i<menuLength; i++){
            if(menuItem[i].href === currentLocation){
                menuItem[i].className="sub-title-item active"                
            }                      
        }
.desplegable-1,.desplegable-2 {
    display:none;
}

.active-desp, .active-desp2{
    display:block;
}

input[type="checkbox"] {
    display: none;
}

.sub-title-item.active{
    color:#0AADFF;
    font-weight: 400;
}

.sub-title-item{
    color:black;
    font-weight: 200;
}

a{
text-decoration:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item">  
                    <input type="checkbox" id="A"/>
                    <label for="D" class="title-item">Titulo 3</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="A-A"/>
                                <label for="A-A" class="title-sub">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Sub titulo 3</a></li>                     
                        </li>                  
                    </ul>
</div>
<div class="item">
                    <input type="checkbox" id="B"/>
                    <label for="D" class="title-item">Titulo 2</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="B-A"/>
                                <label for="B-A" class="title-sub">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Subtitulo3</a></li>                     
                        </li>                  
                    </ul>
</div>
<div class="item">
                    <input type="checkbox" id="B"/>
                    <label for="D" class="title-item">Titulo 1</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="B-A"/>
                                <label for="B-A" class="title-sub">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Sub titulo 3</a></li>                     
                        </li>                  
                    </ul>
</div>

1

1 respuesta 1

0

Hola lo que puedes hacer es guardar el label seleccionado en el localStorage

Primero ponerle un id a cada label (data-id) a los titulos y subtitulos

    <div class="item">  
                    <input type="checkbox" id="A"/>
                    <label for="D" class="title-item" data-id="titulo3">Titulo 3</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="A-A"/>
                                <label for="A-A" class="title-sub" data-id="titlesub3">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Sub titulo 3</a></li>                     
                        </li>                  
                    </ul>
</div>
<div class="item">
                    <input type="checkbox" id="B"/>
                    <label for="D" class="title-item" data-id="titulo2">Titulo 2</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="B-A"/>
                                <label for="B-A" class="title-sub" data-id="titlesub2">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Subtitulo3</a></li>                     
                        </li>                  
                    </ul>
</div>
<div class="item">
                    <input type="checkbox" id="B"/>
                    <label for="D" class="title-item" data-id="titulo1">Titulo 1</label>                
                    <ul class="desplegable-1">                    
                        <li class="sub-li"><a href="#" class="sub-title-item">Sub titulo 1</a></li>
                        <li class="sub-li"><a href="#">Sub titulo 2</a></li>
                        <li class="sub-li-1">
                            <div class="sub-item">
                                <input type="checkbox" id="B-A"/>
                                <label for="B-A" class="title-sub" data-id="titlesub1">Lista de Sub titulos</label>       
                                <ul class="desplegable-2">
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 1</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 2</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 3</a></li>
                                    <li class="sub-li-2"><a href="#" class="sub-item-2">Lista 4</a></li>                                                          
                                </ul>
                                </div> 
                        </li>                                               
                        <li class="sub-li"><a href="#">Sub titulo 3</a></li>                     
                        </li>                  
                    </ul>
</div>

Luego en tu función donde le das la funcionalidad al click del label guardamos el id del label seleccionado

$("label.title-item").click(function() {
    // Obtener el elemento que se debe mostrar u ocultar
    let desplegable = $(this).next(".desplegable-1");

    //Eliminar 
    if (!desplegable.hasClass('active-desp')) {
        localStorage.setItem("titleSelected", $(this).data("id"));
    }else{
         localStorage.removeItem("titleSelected");
    }

    // Saber si se tiene que mostar u ocultar
    let mostrar = !desplegable.hasClass('active-desp');
    // Ocultar todos los desplegables
    $(".desplegable-1").removeClass("active-desp");
    // Mostrar u ocultar el actual
    if(mostrar) {
        desplegable.addClass('active-desp');
    } else {
        desplegable.removeClass('active-desp');
    }

});

$("label.title-sub").click(function() {

    if ($(this).next(".desplegable-2").hasClass("active-desp2")) {
        localStorage.removeItem("subTitleSelected");
    }else{
        localStorage.setItem("subTitleSelected", $(this).data("id"));
    }
    

        // Buscar el siguiente elemento por clase
    $(this).next(".desplegable-2").toggleClass("active-desp2");
});

Y por ultimo cuando se carga la pagina si el localStarage tiene valor damos click al label seleccionado

$( document ).ready(function() {
   //Titulo
    if (localStorage.getItem("titleSelected") != null) {
        $("label[data-id='"+ localStorage.getItem("titleSelected") +"']").trigger("click");
        //Subtitulo
        if (localStorage.getItem("subTitleSelected") != null) {
                $("label[data-id='"+ localStorage.getItem("subTitleSelected") +"']").trigger("click"); 
        }
    }
});
3
  • Gracias si funciona, pero al seleccionar otra opcion fuera de la lista, la pagina se actualiza y la lista sigue desplegada, como haria para que no salga desplegada si no ha sido seleccionado? el 21 jul. 2022 a las 22:38
  • Disculpa Jorge, si en caso hay titulos que no tienen lista como seria para que esten activos ellos y no haya ninguna lista desplegada? el 21 jul. 2022 a las 22:53
  • Hola, ya te lo actualice para que cuando cierren la lista se elimine el item de localstarage y al momento de refrescar la pagina ya no aparesca desplegada
    – Jorge Luis
    el 21 jul. 2022 a las 23:01

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.