Salut,

J'ai un conflit entre deux de mes fonctions JS utilisé dans ma page HTM.
Explications :
Mon but est de faire apparaître et disparaître des blocs "UL".
Pour cela, j'utilise soit ma fonction Expand qui agit sur le noeud directement.
Soit mes fonctions ExpandM et ExpandN pour tout étendre ou tout faire disparaître d'un seul coup.
J'ai également une fonction qui change l'image sur le clic.

Le problème est le suivant :
Quand je replie tout via le bouton moins_all (fonction ExpandN) et que je reclique sur le bouton "plus" (fonction Expand), le block "ul id=X11" n'est plus affiché du tout.

Voilà mes fonctions JS :

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
// 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 = 'MAN/moins.png';
		img.alt = '-';
	}
	// cache le menu
	else {
		node.style.display = 'none';
		img.src = 'MAN/plus.png';
		img.alt = '+';
	}
}
 
function expandM(idpl) {
var les_li;
var les_ul = idpl.getElementsByTagName("ul");  // Récupère la liste des menus
for (var i=0; i<les_ul.length; i++) { // Parcours les menus pour les afficher
  les_ul[i].style.display="block";
  les_li = les_ul[i].getElementsByTagName("li");  // Récupère la liste des ligne du menu
  for (var j=0; j<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
    //les_li[j].style.display="block";
	expand(les_li[j]);
}
}
 
function expandN(idpl1) {
var les_ul = idpl1.getElementsByTagName("ul");  // Récupère la liste des menus
for (var i=0; i<les_ul.length; i++)     // Parcours les menus pour les afficher
  les_ul[i].style.display='none';
}
 
function ChangeImg(nom_de_l_image, chemin_de_l_image){
   document.getElementById(nom_de_l_image).src = chemin_de_l_image;
}
Et ma page HTM
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="tree/style.css">
<script type="text/javascript" language="javascript" src="tree/function.js"></script>
</head>
<body background="MAN/Fond.png">
 
		<!-- 2 lignes suivantes à paramétrer selon id +/- si présence de +/- -->
		<img src="MAN/plus_all.png" ALT="Permet d'ouvrir tous les &quot;+&quot;" class="all" width="15" height="15" onclick="ChangeImg('Y10', 'MAN/moins.png');expandM(document.getElementById('X10'));ChangeImg('Y11', 'MAN/moins.png');expandM(document.getElementById('X11'))";>
		<img src="MAN/moins_all.png" class="all" width="15" height="15" onclick="ChangeImg('Y10', 'MAN/plus.png');expandN(document.getElementById('X10'));ChangeImg('Y11', 'MAN/plus.png');expandN(document.getElementById('X11'))";>
 
<ul id="X10">
   <li>
   <img src="MAN/plus.png" onclick="expand(this.parentNode)" id="Y10">
   <p>Lien 1</p> 
    <ul class="toc" style="display:none">
         <p>Lien 1-1</p>
         <ul id="X11">
             <li>
              <img src="MAN/plus.png" onclick="expand(this.parentNode)" id="Y11">
              <p>Lien 1-2</p>
              <ul class="toc" style="display:none">
                  <p>Lien 1-2-1</p>
               </ul> 
             </li>
         </ul>
         <p>Lien 1-3</p>
      </ul>
   </li>
</ul>
 
</body>
</html>
Je pense qu'une fois les ul passés en mode "display none" par la fonction ExpandN, ils "n'arrivent" plus à repasser en mode block.
Quelqu'un a-t-il une solution ?

[EDIT]
Bon alors je pense qu'il faudrait que ma fonction ExpandN masque seulement les noeuds principaux, au lieu de parcourir tous les ul de la page...