Arborescence de liste

**pitchalov** · 07/01/2010, 18h25

Bonjour,

Je voudrais réaliser une arborescence repliable sur une liste ul -li.

Je me suis appuyé sur ce tutoriel pour en réaliser une.

Mon problème est que chaque menu se replie ou s'étend lorsque je clique sur l'image du noeud, mais le repliement ne se fait pas sur les sous menus...

Voici mon code :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<script type="text/javascript">
// Fonction qui affiche/cache un menu
function expand(li) {
	var node = li.firstChild;
	var img = li.firstChild;
	// parcours tous les fils pour trouver l'element UL
	while ( node.nodeName != "UL" )
		node = node.nextSibling;
	// parcours tous les fils pour trouver l'element IMG
	while ( img.nodeName != "IMG" )
		img = img.nextSibling;
	// affiche le menu
	if ( node.style.display == 'none' ) {
		node.style.display = 'block';
		img.src = 'img/moins.gif';
		img.alt = '[-]';
	}
	// cache le menu
	else {
		node.style.display = 'none';
		img.src = 'img/plus.gif';
		img.alt = '[+]';
	}
}
 
// Fonction qui cache tous les menus
function collapseMultiple() {
	// Recupere le menu de niveau 1
	niv1 = document.getElementById('niv1');
	// recupere tous les menus dépliants
	tab_ul = niv1.getElementsByTagName("UL");
	nb = tab_ul.length;
	// cache tous les menus
	for(var i=0; i<nb; i++) {
		expand(tab_ul[i].parentNode);
	}
 
	window.onLoad = collapseMultiple();
}
</script>
 
<ul class="niv0">
	<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">Noeud niveau 0 (unique)
		<ul class="niv1">
			<li><a href=#>lien 1 niveau 1</a></li>
			<li><a href=#>lien 2 niveau 1</a></li>
		</ul>
		<ul class="niv1">
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 1 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
					<li><a href=#>lien 2 niveau 2</a></li>
					<li><a href=#>lien 3 niveau 2</a></li>
				</ul>
				<ul class="niv2">
					<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 2
						<ul class="niv3">
							<li><a href=#>lien 1 niveau 3</a></li>
							<li><a href=#>lien 2 niveau 3</a></li>
							<li><a href=#>lien 3 niveau 3</a></li>
						</ul>
						<ul class="niv3">
							<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 3
								<ul class="niv4">
									<li><a href=#>lien 1 niveau 4</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 2 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
					<li><a href=#>lien 2 niveau 2</a></li>
					<li><a href=#>lien 3 niveau 2</a></li>
				</ul>
			</li>
		</ul>
		<ul class="niv1">
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 2 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
				</ul>
				<ul class="niv2">
					<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 2
						<ul class="niv3">
							<li><a href=#>lien 1 niveau 3</a></li>
							<li><a href=#>lien 2 niveau 3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Pouvez-vous me donner des conseils pour pouvoir avancer?
Merci.

**pitchalov** · 11/01/2010, 08h16

Bonjour,

Je n'inspire pas grand monde apparemment.

Cela dit je suis toujours dans la même impasse, et je ne vois pas trop quoi faire...
Je n'ai pas beaucoup de connaissance en Web, et encore moins en javascript, et je pense pas que mon problème soit très compliqué, mais je n'ai pas réussi à trouver la réponse par moi-même.

Pour être plus clair sur mon sujet, j'ai une arborescence repliable composée de menus et sous-menus sur 4 niveaux. Mon problème est que je n'arrive pas à replier les sous-menus entièrement : entièrement replié, mon arbre garde son arborescence et seuls les <li> sont repliés dans chaque sous-menu.

Merci de votre aide si vous avez une piste.

**vermine** · 11/01/2010, 08h34

Bonjour,

Supprimer certains <ul>, comme celui-ci, mais il y en a d'autres:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul class="niv1">
   <li><a href=#>lien 1 niveau 1</a></li>
   <li><a href=#>lien 2 niveau 1</a></li>
</ul>
<ul class="niv1">
   <li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 1 niveau 1
   <ul class="niv2">
      <li><a href=#>lien 1 niveau 2</a></li>
      <li><a href=#>lien 2 niveau 2</a></li>
      <li><a href=#>lien 3 niveau 2</a></li>
   </ul>
   ...
</u> //Devient </li>

Enfin... si j'ai bien compris le problème.

Si vous voulez que vos sous-menus qui sont eux-mêmes des menus se replient comme les sous-menus qui n'ont pas de sous-menu, alors vous devez les considérez avant tout comme des <li> et seulement après comme des <ul>.
Oui, je sais, c'est du chinois.

**vermine** · 11/01/2010, 08h50

Allez, j'ai été gentil, j'ai changé ce qu'il fallait car en fait, il y avait des débuts de <ul> inutiles et pas les fins. Je vous donne le code avec deux-trois lignes en couleur pour être sur que vous ayez bien compris.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<ul class="niv0">
	<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">Noeud niveau 0 (unique)
		<ul class="niv1">
			<li><a href=#>lien 1 niveau 1</a></li>
			<li><a href=#>lien 2 niveau 1</a></li>
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 1 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
					<li><a href=#>lien 2 niveau 2</a></li>
					<li><a href=#>lien 3 niveau 2</a></li>
					<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 2
						<ul class="niv3">
							<li><a href=#>lien 1 niveau 3</a></li>
							<li><a href=#>lien 2 niveau 3</a></li>
							<li><a href=#>lien 3 niveau 3</a></li>
							<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 3
								<ul class="niv4">
									<li><a href=#>lien 1 niveau 4</a></li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 2 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
					<li><a href=#>lien 2 niveau 2</a></li>
					<li><a href=#>lien 3 niveau 2</a></li>
				</ul>
			</li>
			<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)"> Noeud 3 niveau 1
				<ul class="niv2">
					<li><a href=#>lien 1 niveau 2</a></li>
					<li><img src="img/moins.gif" alt="[+]" class="clic" onclick="expand(this.parentNode)">  Noeud 1 niveau 2
						<ul class="niv3">
							<li><a href=#>lien 1 niveau 3</a></li>
							<li><a href=#>lien 2 niveau 3</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

**pitchalov** · 11/01/2010, 08h54

Whaou ça marche super bien!
Merci beaucoup vermine!

Je me suis fait avoir, le code javascript était donc bien, et c'était le html qui était naze... Mauvaise piste donc, ça m'apprendra.

Merci encore et bonne continuation!

Arborescence de liste

JavaScript

Discussions similaires

Partager

Partager