Discussion :

[Spir]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...
	});
});

[marcha]

Salut,

as-tu essayé des choses du genre:

$("ul", $(this))

ou

$(this).children() ?

[Spir]

Salut,

as-tu essayé des choses du genre:

$("ul", $(this))

ou

$(this).children() ?

non. Effectivement ca marche...

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[marcha]

Et avec children() ça donne quoi ?

[Spir]

Et avec children() ça donne quoi ?

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(document).ready(function() {
	$("li").click(function(){
		$(this).parent().children().children().hide();					
		$(this).children().show();
	});
});