1

Actualmente mi código funciona cuando cada vez que le das clic a un label se despliegue la lista de sub titulos y de igual manera dentro de esta lista hay otra la lista de subtitulos, lo que quiero saber es como hacer para que cuando se despliegue uno se cierre el otro y así sucesivamente.

Dejo mi codigo que esta funcionando hasta el momento pero esto solo hace que puedan desplegar los que desees pero al seleccionar otro label no se oculta el despliegue anterior.

Agradecería me puedan ayudar por favor.

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

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

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

input[type="checkbox"] {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 respuesta 1

0

Lo que hay que hacer es:

  1. Obtener el elemento que se debe mostrar u ocultar, de acuerdo al título donde se hizo clic: let desplegable = $(this).next(".desplegable-1");
  2. Saber si está visible u oculto usando el método .hasClass(), si está visible (tiene la clase), devuelve verdadero, si está oculto (no tiene la clase), devuelve falso
  3. Toma nota del signo de admiración al inicio de !desplegable.hasClass('active-desp'); para hacer que el valor se invierta
  4. Si el elemento está visible, la variable mostrar será falso y, si está oculto, entonces será verdadero
  5. Ocultar todos los desplegables por clase
  6. Mostrar (agregar clase) u ocultar (remover clase) el actual de acuerdo a la variable mostrar

$("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");
});
.desplegable-1,.desplegable-2 {
    display:none;
}

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

input[type="checkbox"] {
    display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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
  • Muchas gracias si me sirvió! Commented el 21 jul. 2022 a las 21:16

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.