Display block/none en cascade

Version imprimable

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:

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:

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...

26/07/2010, 14h11
le_chomeur
Bonjour :)

Alors avant de me pencher sur ton script js pur quelques conseils :

- Refaire ton arborescence UL/LI : un ul ne peut pas contenir un <P> directement tu dois l'inclure dans un élément de liste LI

- une fois ton arborescence correct , tu n'as plus qu'a traduire l'algo en code et tu peux tout faire en une seule méthode ;) et sans id pour tous les sous menu

ALGO :
Code:

1 2 3 4 5 fonction Tree(node){ tant qu'il y a des noeuds si noeud est un ul si noeud visible alors rendre invisible sinon rendre visible }
26/07/2010, 14h14
vermine

Bonjour,

Oui parce que là en fait votre fonction expand ne parcours pas tous les noeuds et ne change donc le display que des premiers fils. Lorsque vous faites cacher tous les noeuds en une seule fois, vous cachez chaque noeud. Du coup, sur le bouton + qui pose problème, vous affichez uniquement les premiers noeuds. Ceux qui suivent restent cachés.

Merci à vous de m'aider ^^

Alors ok j'ai viré les P (en fait je les utilisais dans ma css, mais je vais faire autrement).

Pour l'utilisation d'une seule méthode je ne comprend pas tout à fait ?
Ce serait pour remplacer les ExpandN et ExpandM ? Dans ce cas Ok, mais en quoi cela va résoudre le problème initial ?
Les UL et sous-UL seront toujours en display none, et du coup l'utilisation de la fonction Expand ne les affichera toujours pas.

Est ce que ma proposition d'appliquer la fonction ExpandN (pour tout minimiser) uniquement sur les noeuds principaux est correcte ?
Si oui, peux tu me donner un coup de main ?
Code:

1 2 3 4 5 6 7 function expandN(idpl1) { var les_ul = idpl1.getElementsByTagName("ul"); // Récupère la liste des menus var les_ul_child = les_ul.firstChild; for (var i=0; i<les_ul_child.length; i++) // Parcours les menus pour les afficher les_ul_child[i].style.display='none'; }
Je n'y connais pas grand chose (ça doit se voir), et forcément ma fonction ne marche pas. :s

voici un exemple complet ;)

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
 
<!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">
function Tree(element)
{
	nodeSearch = (element.nodeName == "UL") ? element.firstChild : element.parentNode.firstChild;
	while ( nodeSearch )
	{
		if(nodeSearch.nodeName == "UL"){
			nodeSearch.style.display = (nodeSearch.style.display == 'none') ? 'block':'none';
			element.innerHTML = (element.innerHTML == '-') ? '+':'-';
		}
		if(element.nodeName != "BUTTON" && nodeSearch.nodeName == "LI")
		{
			Tree(nodeSearch.firstChild);
		}
		nodeSearch = nodeSearch.nextSibling;
	}
}
</script>
</head>
<body>
 
<button onclick="Tree(document.getElementById('Menu'))" type="button">Tout ouvrir/fermer</button>
 
<ul id="Menu">
	<li>premier menu <button onclick="Tree(this)" type="button">-</button>
	<ul>
		<li>- sous menu <button onclick="Tree(this)" type="button">-</button>
		<ul>
			<li>- sous sous menu  </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
		</ul>
		</li>
		<li>- sous menu </li>
		<li>- sous menu </li>
		<li>- sous menu </li>
	</ul>
	</li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">+</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
</ul>
</body>
</html>

EDIT : j'utilise une fonction récursive :)

Ok !
Je comprend mieux l'utilité d'une seule méthode.
Mais je crois qu'on a le même petit problème quand même.
J'ai repris ton code en lui mettant des petits noms histoire que tu vois de quoi je parle :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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">
function Tree(element)
{
	nodeSearch = (element.nodeName == "UL") ? element.firstChild : element.parentNode.firstChild;
	while ( nodeSearch )
	{
		if(nodeSearch.nodeName == "UL"){
			nodeSearch.style.display = (nodeSearch.style.display == 'none') ? 'block':'none';
			element.innerHTML = (element.innerHTML == '-') ? '+':'-';
		}
		if(element.nodeName != "BUTTON" && nodeSearch.nodeName == "LI")
		{
			Tree(nodeSearch.firstChild);
		}
		nodeSearch = nodeSearch.nextSibling;
	}
}
</script>
</head>
<body>
 
<button onclick="Tree(document.getElementById('Menu'))" type="button">Tout ouvrir/fermer</button>
 
<ul id="Menu">
	<li>premier menu <button onclick="Tree(this)" type="button">-</button>
	<ul>
		<li>- sous menu 1<button onclick="Tree(this)" type="button">-</button>
		<ul>
			<li>- sous sous menu 1-1 </li>
			<li>- sous sous  menu 1-2</li>
			<li>- sous sous  menu 1-3</li>
			<li>- sous sous  menu 1-4</li>
		</ul>
		</li>
		<li>- sous menu 2</li>
		<li>- sous menu 3</li>
		<li>- sous menu 4</li>
	</ul>
	</li>
	<li>deuz menu <button onclick="Tree(this)" type="button"></button></li>
	<li>troiz menu <button onclick="Tree(this)" type="button"></button></li>
	<li>quat menu <button onclick="Tree(this)" type="button"></button></li>
</ul>
</body>
</html>

Alors si tu cliques uniquement sur le bouton "tout ouvrir tout fermer" ça marche impec.
Mais si en première action, tu cliques sur sous-menu 1 pour le refermer, et que après tu fait le bouton "tout ouvrir tout fermer", tu vois que le sous menu 1 reste fermé, même si on lui dit de tout ouvrir.

Tu vois ce que je veux dire ?

Merci en tout cas !

26/07/2010, 15h14
le_chomeur

ok ok je vois , toi tu souhaiterais TOUT ouvrir ou tout fermer grâce au bouton "tout ouvrir/fermer" même les sous menu ?
26/07/2010, 15h17
emmeline.a

Exact !
T'as une idée ?

Du coup j'essaie de n'appliquer ma fonction ExpandN qu'aux noeuds "premier enfant" des ul.

J'ai un peu de mal !

Quelqu'un saurait-il m'aider ?

Fonction de base :

Code:

1
2
3
4
5
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';
}

Fonction modifiée (marche pas):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function expandN(idpl1) {
	var node = idpl1.firstChild;
	var img =idpl1.firstChild;
	// parcours tous les fils pour trouver l'element UL
	while ( node.nodeName != "UL" )
		node = node.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 = '+';
	}
}

voila en plus simple ;)

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
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
 
 
 
<!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">
function Tree(element,main)
{
	NodesClose = (main) ? element.getElementsByTagName('UL'):element.parentNode.getElementsByTagName('UL');
	display = (NodesClose[0].style.display == 'none') ? 'block':'none';
	if(NodesClose.length > 0){
		for(var i = 0, l = NodesClose.length;i <l ; i++){
			NodesClose[i].style.display = display;
		}
	}
 
}
</script>
</head>
<body>
 
<button onclick="Tree(document.getElementById('Menu'),true)" type="button">Tout ouvrir/fermer</button>
 
<ul id="Menu">
	<li>premier menu <button onclick="Tree(this)" type="button">-</button>
	<ul>
		<li>- sous menu <button onclick="Tree(this)" type="button">-</button>
		<ul>
			<li>- sous sous menu  </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
		</ul>
		</li>
		<li>- sous menu </li>
		<li>- sous menu 
		<ul>
			<li>- sous sous menu  </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
		</ul>
		</li>
		<li>- sous menu </li>
	</ul>
	</li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">+</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
</ul>
</body>
</html>

principe :

si je récupère le menu principal je récupère tous les UL qu'il contient et je les ouvre/ferme selon l'état du menu principal.
Sinon je récupère le parent du bouton ( donc le LI ) puis je récupère tous les sous menu UL de ce li et les ouvre / ferme selon l'état :)

Cool, ça marche comme prévu.
Par contre je perd ma fonctionnalité de base qui est de changer l'image plus en moins lors du clic.
Je dois l'inclure dans fonction ou je garde celle que j'avais ?
Code:

1 2 3 function ChangeImg(nom_de_l_image, chemin_de_l_image){ document.getElementById(nom_de_l_image).src = chemin_de_l_image; }
[EDIT]
En appelant la fonction ChangeIMG via les identifiants des images, j'arrive à changer les moins en plus mais forcément la réciproque n'est pas possible étant donné que maintenant je n'ai qu'un bouton pour ouvrir et fermer tout.

Il doit y avoir un moyen pour parcourir la page et lui dire que si le bloc est ouvert on met l'image moins, et si le bloc est fermé on met l'image plus.

Tu me donnerais un dernier coup de main ?

[EDIT2]
J'essaie avec ça mais ça ne change pas l'image :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function chg(li) { var node = li.firstChild; var img = li.firstChild; // parcours tous les fils pour trouver l'element IMG while ( img.nodeName != "IMG" ) img = li.firstChild.nextSibling; // affiche le menu if ( node.style.display == 'none' ) { img.src = 'MAN/moins.png'; img.alt = '-'; } // cache le menu else { img.src = 'MAN/plus.png'; img.alt = '+'; } }
Quelqu'un a une idée ?

voila :

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
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
 
 
<!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">
function Tree(element,main)
{
	var NodesClose = (main) ? element.getElementsByTagName('UL'):element.parentNode.getElementsByTagName('UL');
	var ListeBouton = (main) ? element.getElementsByTagName('BUTTON'):element.parentNode.getElementsByTagName('BUTTON');
	var display = (NodesClose[0].style.display == 'none') ? 'block':'none';
	var image = "";
	if(main)
	{
		document.getElementById('btnOpen').innerHTML = (display == 'none') ? "Tout ouvrir":"Tout fermer";
	}
 
	for(var i = 0 , l = ListeBouton.length; i <l;i++){
		ListeBouton[i].innerHTML = (display == 'none') ? "+":"-";
	}
 
	if(NodesClose.length > 0){
		for(var i = 0, l = NodesClose.length;i <l ; i++){
			NodesClose[i].style.display = display;
		}
	}
 
}
</script>
</head>
<body>
 
<button onclick="Tree(document.getElementById('Menu'),true)" type="button" id="btnOpen">Tout ouvrir/fermer</button>
 
<ul id="Menu">
	<li>premier menu <button onclick="Tree(this)" type="button">-</button>
	<ul>
		<li>- sous menu <button onclick="Tree(this)" type="button">-</button>
		<ul>
			<li>- sous sous menu  </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
		</ul>
		</li>
		<li>- sous menu </li>
		<li>- sous menu 
		<ul>
			<li>- sous sous menu  </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
			<li>- sous sous  menu </li>
		</ul>
		</li>
		<li>- sous menu </li>
	</ul>
	</li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">+</button></li>
	<li>premier menu <button onclick="Tree(this)" type="button">-</button></li>
</ul>
</body>
</html>

tu a juste a remplacer par l'url de tes images :)

27/07/2010, 12h14
emmeline.a

Super merci ! :ccool:
4 fonctions en une t'as assuré !

A+