Display block/none en cascade

**emmeline.a** · 26/07/2010, 13h52

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

**le_chomeur** · 26/07/2010, 14h11

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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
}

**vermine** · 26/07/2010, 14h14

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.

**emmeline.a** · 26/07/2010, 14h33

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**le_chomeur** · 26/07/2010, 14h39

voici un exemple complet

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

**emmeline.a** · 26/07/2010, 14h56

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 :

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

**le_chomeur** · 26/07/2010, 15h14

ok ok je vois , toi tu souhaiterais TOUT ouvrir ou tout fermer gr�ce au bouton "tout ouvrir/fermer" m�me les sous menu ?

Display block/none en cascade

JavaScript

Vue hybride

Discussions similaires

Partager

Partager