[jQuery] sélection d'une liste imbriqué

Bonjour.
Mon pb est simple pourtant je butte dessus...
Voilà j'ai une liste qui est imbriqué dans une autre.

Au depart seul la liste de premier niveau. La liste de deuxieme nivveau est invisible.
Lors du clic sur un élément de la liste du premier niveau, alors la liste de deuxieme niveau de cet élément doivent d'afficher (je peux avoir un 3ieme niveau lui même imbriqué dans la liste de niveau 2 caché).

La contrainte : un ID uniquement sur la liste de premier niveau. Les autres listes doivent etre sasn class ou ID. Donc je suis obligé jouer avec les child je pense.

Un exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<ul id="main"> <li>texte 1 <ul> <li>texte 1.1 <ul> <li>texte 1.1.1</li> <li>texte 1.1.2</li> <li>texte 1.1.3</li> </ul> </li> <li>texte 1.2</li> <li>texte 1.3</li> </ul> </li> <li>texte 2 <ul> <li>texte 2.1 <ul> <li>texte 2.2.1</li> <li>texte 2.2.2</li> <li>texte 2.2.3</li> </ul> </li> <li>texte 2.2</li> <li>texte 2.3</li> </ul> </li> </ul>

---

Au depart seul ceci est visible :

Code:

---

1 2 3 4

<ul id="main"> <li>texte 1</li> <li>texte 2</li> </ul>

---

Si on clic sur "texte 1" alors on verra ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10

<ul id="main"> <li>texte 1 <ul> <li>texte 1.1</li> <li>texte 1.2</li> <li>texte 1.3</li> </ul> </li> <li>texte 2</li> </ul>

---

Et ainsi de suite.

Du coup en jQuery ca commence comme ceci :

Code:

---

1 2 3 4 5

$(document).ready(function() { $("#main > li").click(function(){ // Et ici j'ai essayé plein de trucs pour selectionner la liste contenu dans le LI courrant sans succès... }); });

---

Salut,

as-tu essayé des choses du genre:

$("ul", $(this))

ou

$(this).children() ?

Citation:

---

Envoyé par marcha

Salut,

as-tu essayé des choses du genre:

$("ul", $(this))

ou

$(this).children() ?

---

non. Effectivement ca marche... :roll:

merci! J'étais trop la tête dans le guidon... Par contre ca affiche aussi les autres listes imbriqué.

Pourtant j'ai bien ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

body > ul{ margin: 5px; } body > ul li{ margin: 5px; } body > ul > li > ul { display: none; } body > ul > li > ul > li > ul { display: none; }

---

Code:

---

1 2 3 4 5

$(document).ready(function() { $("#mainLevel > li").click(function(){ $("ul", $(this)).show(); }); });

---

I:l faudrait que le show() ne s'applique qu'au liste directement concerné. Par les sous liste des listes. Arg c'est embrouillant.

Et avec children() ça donne quoi ?

Citation:

---

Envoyé par marcha

Et avec children() ça donne quoi ?

---

Merci beaucoup encore une fois. J'ai fait ceci qui fonctionne :

Code:

---

1 2 3 4 5 6

$(document).ready(function() { $("li").click(function(){ $(this).parent().children().children().hide(); $(this).children().show(); }); });

---