jQuery: función "data-target" anidada

Este es mi código:

$("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).removeClass("show");
  target.toggleClass("show");
})
* {
  cursor: default;
}

li {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
}



    
  
  • Link One
    • 
  
  • Link Two
    • 
  
  • Link Three
    •

Por lo general, parece como debería parecer. Pero: Si hace clic en "Link Dos" y luego "Link Dos Uno" o "Link Dos", la primera navegación debe ser visible. El contenido de "Link Dos Uno" o "Link Dos Dos" debe ser añadido bajo eso. Si hace clic en "Link One" o "Link Three", el contenido de "Link Two One" y "Link Two Two" se debe derrumbar (y la navegación "dos" por supuesto oculta de nuevo).

¿Cómo es posible hacer eso? Yo estaría muy agradecido por la ayuda! :)

Pregunta hecha hace 3 años, 4 meses, 29 días - Por codecrusader

3 Respuestas:

  • Una opción sería utilizar .not(this.closest('ul')) para evitar el colapso uls que son padres del elemento clicado:

    $("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).not(this.closest('ul')).removeClass("show");
  target.toggleClass("show");
})
    * {
  cursor: default;
}

li {
  cursor: pointer;
}

.hidden {
  display: none;
}

.show {
  display: block;
}
    


      
  
    • Link One
      • 
  
    • Link Two
      • 
  
    • Link Three
      •

    Respondida el Dec 17, 2020 a las 03:59 - por bughunterx

    Votos positivos: 0 | Votos negativos: 0

  • Para lograr la funcionalidad que describes, puedes modificar ligeramente el código jQuery para que cuando hagas clic en un elemento de la lista se oculten otros elementos diferentes al apuntado y sus elementos hijos también se muestren o se oculten según corresponda. Aquí te dejo un ejemplo de cómo podrías ajustar tu código:

    javascript
$("ul li").click(function() {
  var target = $($(this).data("target"));
  $(".hidden").not(target).removeClass("show").find(".show").removeClass("show");
  target.toggleClass("show");
});

    Con esta modificación, se eliminará la clase "show" de los elementos que no están siendo apuntados y se ocultarán todos sus elementos hijos que tengan la clase "show". Así, cuando hagas clic en un elemento de la lista, se mostrará su contenido y se ocultará el contenido de los otros elementos. Y cuando hagas clic en un segundo nivel de enlaces, se mostrará su contenido bajo el enlace correspondiente.

    Espero que esta solución te ayude a lograr la funcionalidad que deseas. ¡Déjame saber si tienes alguna otra pregunta!

    Respondida el Dec 18, 2020 a las 04:01 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Tu código está cerca de funcionar correctamente, pero necesita algunos ajustes para manejar el anidamiento correctamente. Aquí tienes una versión modificada que debería funcionar según tus requisitos:

    js
$("ul li").click(function() {
  var $this = $(this);
  var target = $($(this).data("target"));
  var topLevelTarget = target.closest(".hidden");

  // Cerrar todos los elementos ocultos que no sean el objetivo
  $(".hidden").not(topLevelTarget).removeClass("show");

  // Ocultar o mostrar el objetivo
  target.toggleClass("show");

  // Si el objetivo es un elemento de nivel superior, cerrar todos sus hijos
  if (topLevelTarget.length) {
    topLevelTarget.find(".hidden").removeClass("show");
  }
});

    Cambios:

    He añadido una variable $this para almacenar la referencia al elemento li actual. He actualizado el selector para cerrar todos los elementos ocultos que no sean el objetivo de nivel superior, utilizando topLevelTarget.

    • He añadido una comprobación para ver si el objetivo es un elemento de nivel superior (es decir, no anidado dentro de otro elemento oculto). Si es así, oculta todos sus elementos ocultos hijos.

    Esto debería permitirte hacer clic en "Link Dos", luego en "Link Dos Uno" o "Link Dos Dos", y luego en "Link Uno" o "Link Tres" para ocultar el contenido anidado y mostrar el nuevo contenido de nivel superior.

    Respondida el Dec 18, 2020 a las 04:05 - por Gemini

    Votos positivos: 0 | Votos negativos: 0