JS : Ouvrir plusieurs Expand dans une page HTM

**E.Bzz** · 06/11/2009, 11h08

Bien ce qui me semblait

Avec le même code, essaye de changer juste

Code :

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

onclick="expandM(this.ParentNode)"

en

Code :

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

onclick="expandM(document.getElementById('buh'))"

A+

**emmeline.a** · 06/11/2009, 11h15

Et bien oui là ça fonctionne mais seulement avec le menu qui a comme id "buh".
Celui qui a l'id buh2 reste fermé.
J'ai essayé de le changer en idpl mais ça ne marche pas (il faut que j'arrête de tenter des trucs au pif...)
Il faut boucler sur les ul ou quelque chose comme ça ?

**E.Bzz** · 06/11/2009, 11h21

Envoyé par emmeline.a

(il faut que j'arrête de tenter des trucs au pif...)

Je croyais que tu voulais gérer les 2 indépendamment.

Code :

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

onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('buh2'));"

Je te conseille de laisser comme ça (avec 2 appels) plutôt que modifier la fonction : ça te permettra justement de gérer l'un sans modifier l'autre au besoin ...

A+

**emmeline.a** · 06/11/2009, 11h27

Rahh, j'y croyais à mort là !
mais ça n'a pas l'air d'être encore ça, il ne marche que pour le premier expandM appelé.

-> avec onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('buh2'));" c'est le premier menu qui s'ouvre

-> avec onclick="expandM(document.getElementById('buh2'));expandM(document.getElementById('buh'));" c'est le second...

**E.Bzz** · 06/11/2009, 11h34

Avec cette version ?

Code :

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

1
2
3
4
5
6
7
8
9
10
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; i<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
     les_li[j].style.display="block";
}
}

Il ne devrait pas y avoir de problème

A+

**emmeline.a** · 06/11/2009, 11h50

Arg, donc pas moyen d'utiliser la fonction Expand dans la fonction expandM ?
Tout à l'heure je t'avais dit que je préférais car cela gérait du coup les changements des images + et -.

Je te montre quand même ce que j'ai fait avec la 2eme :

Code :

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

1
2
3
4
5
6
7
8
9
10
function expandM(idpl) {
var les_li = idpl.getElementsByTagName("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; i<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
     les_li[j].style.display="block";
}
}

Malheureusement, j'obtiens la même chose que tout à l'heure, c'est à dire, uniquement le 1er menu est déplié en fonction de l'id que je met dans l'appel.

**emmeline.a** · 06/11/2009, 11h52

EDIT global du message :
Donc !
Avec ton dernier code

Code :

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

1
2
3
4
5
6
7
8
9
10
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; i<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
     les_li[j].style.display="block";
}
}

Même résultat qu'avant, le 1er menu est pris en compte en fonction de l'appel de la fonction.

EDIT2 : J'ai une erreur quand même : 'style' a la valeur null ou n'est pas un objet

**E.Bzz** · 06/11/2009, 12h08

Envoyé par emmeline.a

EDIT2 : J'ai une erreur quand même : 'style' a la valeur null ou n'est pas un objet

Ah !
Ca explique certaines choses ...

Tu peux redonner la totalité du code (HTML + JS) qui génère cette erreur ?

A+

**emmeline.a** · 06/11/2009, 12h11

Of course :

Code html :

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
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script type="text/javascript" language="javascript" src="function2.js"></script>
</head>
<body>
<img src="images/plus_all.gif" / class="all" width="15" height="15" ALT="Permettra de regrouper tous les "+"" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'));"> 
    <ul id="buh">
      <li>
      <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">                  	
			<p>Menu</p></li>
			<ul class="toc" style="display:none">    
			<li>      	  
			<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p></li>
				<ul class="toc" style="display:none">
              <li class="marg">
              blabla
              </li>
              </ul>
        	</ul>
       </ul>
    <ul id="Buh2">
      <li>  
        <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
			<p>Menu</p></li>
			<ul class="toc" style="display:none">    
			<li>      	  
			<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p></li>
				<ul class="toc" style="display:none">
              <li class="marg">
              blabla
              </li>
              </ul>
        	</ul>
       </ul></body>
</html>

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
// 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 = 'images/moins.gif';
		img.alt = '[-]';
	}
	// cache le menu
	else {
		node.style.display = 'none';
		img.src = 'images/plus.gif';
		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; i<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
     les_li[j].style.display="block";
}
}

T'as une piste ?

**E.Bzz** · 06/11/2009, 12h17

Envoyé par emmeline.a

T'as une piste ?

Pour l'instant, juste les erreurs de structures qui restent dans ta page :

Code :

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

1
2
<p>Item1</p></li>
				<ul class="toc" style="display:none">

<ul> doit être entre <li> et </li>

Envoyé par E.Bzz

Dans <ul> tous les contenus doivent être entre <li> et </li>.

A+

**emmeline.a** · 06/11/2009, 12h39

Rahh mais quelle idée d'utiliser FrontPage aussi...
j'ai corrigé 2-3 erreurs mais toujours de 2 menus qui s'ouvrent

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
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script type="text/javascript" language="javascript" src="function2.js"></script>
</head>
<body>
<img src="images/plus_all.gif" / class="all" width="15" height="15" ALT="Permettra de regrouper tous les "+"" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'));"> 
    <ul id="buh">
      <li>  
       <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
		<p>Menu</p>
		<ul class="toc" style="display:none">    
			<li>      	  
				<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p>
					<ul class="toc" style="display:none">
              		<li class="marg">blabla</li>
              	</ul>
            </li>
        </ul>
       </li>
     </ul>
 
    <ul id="Buh2">
      <li>  
       <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
		<p>Menu</p>
		<ul class="toc" style="display:none">    
			<li>      	  
				<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p>
					<ul class="toc" style="display:none">
              		<li class="marg">blabla</li>
              	</ul>
            </li>
        </ul>
       </li>
     </ul>
</body>
</html>

toujours l'erreur précédente

**E.Bzz** · 06/11/2009, 12h45

Envoyé par emmeline.a

Rahh mais quelle idée d'utiliser FrontPage aussi...

Je ne te le fais pas dire

Envoyé par emmeline.a

toujours l'erreur précédente

A quel n° de ligne, et quelle est la ligne correspondante dans ton .js ?

A+

**emmeline.a** · 06/11/2009, 12h57

c'est ligne 34 l'erreur, dans le JS c'est la dernière ligne.
Je regarde les erreurs via IE, donc bon ce n'est pas très détaillé ce qu'il me raconte :
Ligne : 34
Car : 6
Erreur : 'style' a la valeur null ou n'est pas un objet
Code :0

**E.Bzz** · 06/11/2009, 12h59

J'ai m***douiller un copié/collé

Code :

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

1
2
for (var j=0; i<les_li.length; j++)  // Parcours les lignes du menu pour les afficher
     les_li[j].style.display="block";

A+

**emmeline.a** · 06/11/2009, 13h07

yeah t'es trop fort !

maintenant je vais essayer de changer les images + en -, mais ça devrait le faire

Merci beaucoup !!!

**E.Bzz** · 06/11/2009, 13h10

... trop distrait surtout

Maintenant que ça fonctionne, tu peux tenter de remplacer les

Code :

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

les_li[j].style.display="block";

par

Code :

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

expand(les_li[j])

A+

**emmeline.a** · 06/11/2009, 14h50

Erf ça ne fonctionne pas avec expand :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
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";
  expand(les_ul[i]);
  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]);
}
}

Erreur : Objet requis
Ligne : 7 -> erreur sur while ( node.nodeName != "UL" ) de la fonction expand
Car : 2
Code : 0

Si t'en as marre laisse tomber je trouverais bien un autre moyen pour changer l'image.

A+

**E.Bzz** · 06/11/2009, 15h08

Envoyé par emmeline.a

Si t'en as marre laisse tomber je trouverais bien un autre moyen pour changer l'image.

Ton message d'erreur est bizarre, car il indique une ligne <li></li> sans rien dedans. Or je n'en ai pas vu ...
Mais ça peut aussi être une <li> non fermée

Bref, une fois c'est vérif faite, tu peux le gérer ainsi :

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
function expand(li) {
	var node = li.firstChild;
	var img = li.firstChild;
        if (node) {             // Si <li> possède un child
	  // 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 = 'images/moins.gif';
		img.alt = '[-]';
	  }
	  // cache le menu
	  else {
		  node.style.display = 'none';
		  img.src = 'images/plus.gif';
		  img.alt = '[+]';
	
	  }
      }
}

A+

**emmeline.a** · 06/11/2009, 15h17

Je change d'erreur maintenant :

Ligne 8
Car 4
Erreur : Objet requis

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
<html>
<head>
<meta http-equiv="Content-Language" content="fr">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<script type="text/javascript" language="javascript" src="function2.js"></script>
</head>
<body>
<img src="images/plus_all.gif" / class="all" width="15" height="15" ALT="Permettra de regrouper tous les "+"" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'))">
    <ul id="Buh">
      <li>  
       <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
		<p>Menu</p>
		<ul class="toc" style="display:none">    
			<li>      	  
				<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p>
					<ul class="toc" style="display:none">
              		<li class="marg">blabla</li>
              	</ul>
            </li>
        </ul>
       </li>
     </ul>
 
    <ul id="Buh2">
      <li>  
       <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
		<p>Menu</p>
		<ul class="toc" style="display:none">    
			<li>      	  
				<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p>
					<ul class="toc" style="display:none">
              		<li class="marg">blabla</li>
              	</ul>
            </li>
        </ul>
       </li>
     </ul>
</body>
</html>

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
// Fonction qui affiche/cache un menu
function expand(li) {
	var node = li.firstChild;
	var img = li.firstChild;
        if (node) {             // Si <li> possède un child
	  // 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 = 'images/moins.gif';
		img.alt = '[-]';
	  }
	  // cache le menu
	  else {
		  node.style.display = 'none';
		  img.src = 'images/plus.gif';
		  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";
  expand(les_ul[i]);
  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]);
}
}

**E.Bzz** · 06/11/2009, 15h54

Bon, manquaient quelques tests dans ta fonction expand()

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
function expand(li) {
	var node = li.firstChild;
	var img = li.firstChild;
        if (node) {             // Si <li> possède un child
	  // parcours tous les fils pour trouver l'element UL
	  while ( node.nodeName != "UL" && node.nextSibling)
		  node = node.nextSibling;
	  // parcours tous les fils pour trouver l'element IMG
	  while ( img.nodeName != "IMG" && img.nextSibling)
		  img = img.nextSibling;
	  // affiche le menu
	  if (node.nodeName == "UL") {
		  if ( node.style.display == 'none' ) {
			node.style.display = 'block';
			if (img.nodeName == "IMG") {
				img.src = 'images/moins.gif';
				img.alt = '[-]';
			}
		  }
		  // cache le menu
		  else {
			  node.style.display = 'none';
				if (img.nodeName == "IMG") {
					img.src = 'images/plus.gif';
					img.alt = '[+]';
				}
		  }
		}
      }
}