0

estoy creando un tooltip sencillo con este código pero me gustaría que cuando clickeo el "item 2" cierre el "ul" del "item 1" o a la inversa. Es decir, que cada clickeo haga doble función, la de abrir el que le corresponde y cerrar el que pueda estar abierto.

function handler( event ) {
  var target = $( event.target );
  if ( target.is( "li" ) ) {
    target.children().toggle();
  }
}
$( "ul" ).click( handler ).find( "ul" ).hide();
4
  • 1
    Hla joselm, puedes compartir tu codigo html para ponernos en contexto y poder ayudarte? De todos modos puedes ocupar la funcion .off de jquery, aqui tienes un ejemplo de la documentacion, espero que te sirva api.jquery.com/off Commented el 18 jun. 2020 a las 14:52
  • Aquí tienes el desarrollo. jsfiddle.net/joselm65/nfchk6bx/3
    – joselm
    Commented el 18 jun. 2020 a las 22:05
  • Puedes colocar ese código aquí mismo, edita la pregunta y usa un Fragmento de código, funciona igual que jsfiddle, pero sin tener que abrir otra pestaña.
    – Triby
    Commented el 19 jun. 2020 a las 21:00
  • Triby ya lo había intentado, pero si inserto el código me dice que es demasiado en comparación con el resto de mensaje. O sea que no me deja a no ser que meta más información.
    – joselm
    Commented el 20 jun. 2020 a las 14:44

1 respuesta 1

0

No funciona como lo esperas porque al hacer clic simplemente muestras u ocultas el elemento que quieres, sin tomar en cuenta el resto.

Basta analizar si el elemento a mostrar está oculto para saber que debe mostrarse y, por tanto, no debe haber otro visible.

$('li.nombre').click(e => {
    // Saber en qué elemento se hizo clic
    let target = $(e.target);
    if(target.children('.CV-especialista').css('display') == 'none') {
        // Está oculto y se va a mostrar, ocultar los demás
        $('.CV-especialista').css('display', 'none');
    }
    // Mostrar u ocultar
    target.children('.CV-especialista').toggle();
});

Por cierto, es más fácil si trabajas directamente con los elementos deseados, como podrás notar, cambié los 'ul' por 'li.nombre' para trabajar solo con los elementos de lista con clase nombre y los 'li' por '.CV-especialista' para identificar las tarjetas que se van a mostrar u ocultar.

2
  • Fantástico!! Muchas gracias Triby, funciona perfectamente. Buena lección.
    – joselm
    Commented el 23 jun. 2020 a las 12:19
  • No olvides marcar la respuesta como aceptada, por favor.
    – Triby
    Commented el 23 jun. 2020 a las 14:20

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.