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.