JS : Ouvrir plusieurs Expand dans une page HTM

**emmeline.a** · 05/11/2009, 13h41

Salut,

J'ai créé une arborescence de menu de ce style :
Etat fermé: + Menu
Qui devient
- Menu
+ Item
Et enfin
Etat ouvert: - Menu
- Item1
blablabla
lorsque je clique sur les + (via un onclick=expand)

J'aurais voulu maintenant ajouter un bouton extérieur qui me permettrait d'arriver directement à l'état ouvert, du genre "Ouvrir tous les +".

Voilà la fonction JS que j'utilise (je précise qu'elle n'est pas de moi) :

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
// 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 = '[+]';
	}
}

Et voici 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
 
<ul>
      <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>

Est ce que quelqu'un a une idée ?
Je pensais faire un genre de boucle sur cette fonction en parcourant toute la page mais n'y connaissant rien en JavaScript je ne sais pas comment procéder.
Merci !

**E.Bzz** · 05/11/2009, 14h10

Bonjour,
avec

Code :

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

<ul id="le_menu">

Code :

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

1
2
3
var les_li = document.getElementById('le_menu').getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcour les menus pour les déplier
  expand(les_li[i]);

A+

**emmeline.a** · 05/11/2009, 14h45

Hello, merci pour ta réponse ultra rapide !
Le truc c'est que je viens d'essayer toutes les possibilités d'utiliser ce que tu m'a envoyé correctement, et faute de mieux, me revoilà à demander des conseils...
-> Je pensais faire une seconde fonction qui ferait ce que je veux (grâce à ton code de tout à l'heure, sauf que ça a l'air de fonctionner uniquement sur le 1er niveau...
Aurais tu 2 minutes pour jeter un oeil ?

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
 
// 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(li) {
	var les_li = document.getElementById('le_menu').getElementsByTagName("li");
	for (var i=0; i<les_li.length; i++)  // Parcour les menus pour les déplier
  		expand(les_li[i]);
}

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
 
<img src="ico_astuce.gif" onclick="expandM(this.parentNode)"> 
 <div class="plusmoins">
    <ul id="le_menu">
      <li>
        <img src="images/plus.gif" onclick="expand(this.parentNode)" class="icoh2" width="9" height="9">        	
        	<p>Menu</p>
        <ul style="display:none">
          <li class="marg"></li>
      </li>  
      <li>
        <img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">       
                    <p>Item1</p>
                <ul style="display:none">
                  <li>
                  blabla
                  </li>
                </ul>
      </li>
    </ul>
 </div>

Un peu + imagé ça donne ça :
+Menu

event: clic sur le bouton ico_astuce.gif dans mon code

-Menu
+Item1

Et non
-Menu
-Item1
blabla

En tout cas, merci de ta réponse

**E.Bzz** · 05/11/2009, 14h56

Arf !
Me rappelais plus qu'il y avait plusieurs niveaux

Avant de modifier :
tu as des balises <ul> non fermées.
tu veux aussi expander les <ul> ?

Après avoir corrigé les <ul> non fermés, essaye ça (qui n'utilise pas ta fonction expand()

Code :

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

1
2
3
4
5
6
7
8
var les_li;
var les_ul = document.getElementById('le_menu').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";
}

A+

**E.Bzz** · 05/11/2009, 15h01

.... il te restera à gérer tes images pour basculer les + en - et lycée de Versailles

A+

**emmeline.a** · 05/11/2009, 15h22

Non non je n'attend pas vraiment d'expand sur les UL, ta fonction de tout à l'heure semblait correspondre parfaitement à ce que je voulais (mis à part le problème des niveaux)
Et sinon en fait mon code HTM était tout moisi par des balises en trop, le revoilà tout propre :

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
 
<img src="ico_astuce.gif" onclick="expandM(this.parentNode)"> 
 <div class="plusmoins">
    <ul id="le_menu">
      <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">          	  
			<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>
        	</ul>
       </li>
    </ul>
</div>

Bon alors du coup... ça marche plus :s

voilà le code JS (pas sûr de moi du tout...)

Code :

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

1
2
3
4
5
6
7
8
9
function expandM(li) {
var les_li;
var les_ul = document.getElementById('le_menu').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";
}

Merci de ton attention en tout cas.
Et pour la gestion des images + -> - ça devrait le faire si je vais au lycée de paris 9ème... (oui j'avoue je tente un truc parce que j'ai pas compris ta vanne

)

**E.Bzz** · 05/11/2009, 15h28

Envoyé par emmeline.a

le revoilà tout propre

Pas vraiment

Dans <ul> tout les contenus doivent être entre <li> et </li>.
C'est pas le cas, au moins ici

Code :

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

1
2
3
4
<ul class="toc" style="display:none">          	  
			<img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9">      
		 		<p>Item1</p>
...

Mais sinon, pas de raison que ça marche pas

PS : lycée de Versailles => vice et versa

A+

**emmeline.a** · 05/11/2009, 15h53

Nikel!!
Bien vu pour les balises, à trop avoir le nez dedans j'en oublie les bases :p
C'était bien ça qui faisait que ça ne marchait plus.
Dis moi, parti sur ta lancée, saurais-tu comment faire pour que si j'ai plusieurs menu dans la page ça marche aussi ?
Là ça ne marche que si je n'ai qu'un seul "id="le_menu".
Est ce qu'il faut se lancer dans une seconde boucle qui rappelle la fonction si il voit un autre id=le_menu ?

PS:

**E.Bzz** · 05/11/2009, 15h58

Envoyé par emmeline.a

si il voit un autre id=le_menu ?

Un ID doit toujours être unique dans la page !!!

Il suffit d'ajouter en paramètre à ta fonction expandM() l'id du menu à traiter (l'autre n'en a pas besoin puisque tu pointes déjà sur l'objet li).
Elle n'aura donc qu'un paramètre, puisque le "li" que tu avais laissé jusqu'à présent est inutile

Tu n'auras qu'à remplacer

Code :

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

document.getElementById('le_menu')

par

Code :

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

document.getElementById(ton_nouveau_parametre)

A+

**emmeline.a** · 05/11/2009, 16h44

Erf, exact... trop de bourrage de crane tue le html...
Comme je t'ai dit au début je ne maitrise pas du tout ce langage (même s'il a l'air bien intéressant)
Du coup, ça fait une demi-heure que je galère pour essayer de faire ce que tu m'as indiqué.
J'ai essayé de reprendre le code que tu m'as montré avant :

Code :

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

1
2
3
4
5
function expandM(Test) {
var les_li = document.getElementById('Test').getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcourt les menus pour les déplier
  expand(les_li[i]);
}

Et en fait je ne vois pas ce qu'il faut que je mette dans ma page htm...
Tu peux m'éclairer ?

**E.Bzz** · 05/11/2009, 16h49

Envoyé par emmeline.a

Et en fait je ne vois pas ce qu'il faut que je mette dans ma page htm...

Dans le html la seule chose à faire est de dupliquer ton menu (en modifiant les id pour qu'ils restent uniques

).
Pour la fonction, juste ce que je t'ai déjà dit

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
function expandM(id_du_menu) {
var les_li;
var les_ul = document.getElementById(id_du_menu).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";
}
}

Dans ta tentative, je pense que la principale erreur était

Code :

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

document.getElementById('Test')

au lieu de

Code :

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

document.getElementById(Test)

EDIT : mais mieux vaut éviter "test" comme identifiant en javascript, de même que tous les autres termes déjà utilisés dans le langage

A+

**emmeline.a** · 05/11/2009, 17h27

Je crois que je régresse... Je n'arrive pas du tout à variabiliser le nom de l'id.

Avec la fonction

Code :

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

1
2
3
4
5
function expandM(idpl) {
var les_li = document.getElementById(idpl).getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcourt les menus pour les déplier
  expand(les_li[i]);
}

Ca me fait une erreur: document.getElementbyId(...) a la valeur Null ou n'est pas un objet. (et rien ne se déplie)

Et avec celle là

Code :

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

1
2
3
4
5
6
7
8
9
function expandM(id_du_menu) {
var les_li;
var les_ul = document.getElementById(id_du_menu).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";
}

J'ai une erreur : Objet attendu. Et là non plus rien ne se déplie...

Et je n'ai pas modifié mon code 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
 
<img src="ico_astuce.gif" onclick="expandM(this.parentNode)"> 
 <div class="plusmoins">
    <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>
</div>

Merci de ta patience en tout cas tes explications sont nikels ! (c'est juste moi qui est du mal :p)

**E.Bzz** · 05/11/2009, 17h33

Non non, c'est pas loin

C'est juste que tu appelles la fonction en lui passant l'objet lui-même au lieu de lui passer son id (ce qui marcherait quand même avec une chtite modif) ...

Pour ouvrir le menu id="le_menu" tu dois faire

Code :

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

onclick="expandM('le_menu')"

Alors qu'avec ton appel

Code :

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

onclick="expandM(this.parentNode)"

il faudrait que la fonction soit

Code :

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

1
2
3
function expandM(idpl) {
var les_li = idpl.getElementsByTagName("li");
....

Mais les 2 sont absolument équivalents : c'est juste une question de choix

A+

**emmeline.a** · 05/11/2009, 17h52

Toujours pas gagné

Effectivement avec
function expandM(idpl) {
var les_li = idpl.getElementsByTagName("li");
je n'ai plus d'erreur, mais mon menu ne veut toujours pas s'ouvrir...

Ma fonction expand marche normalement par contre... c'est toujours ça

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
// 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 = idpl.getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcourt les menus pour les déplier
  expand(les_li[i]);
}

bon j'avoue ce bout de code n'a pas un grand intérêt à être posté mais sait-on jamais si tu y vois une faille...

Si tu le testes chez toi ça marche ?

et encore merci

**E.Bzz** · 05/11/2009, 17h56

Ah ben oui, mais si tu repars d'une version précédente, on va avoir du mal à se comprendre

Mon dernier post concernait cette version là :

Code :

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

1
2
3
4
5
6
7
8
9
10
function expandM(id_du_menu) {
var les_li;
var les_ul = document.getElementById(id_du_menu).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";
}
}

EDIT : à laquelle il manquait un accolade finale, d'ailleurs

(corrigée dans le post précédent)

A+

**emmeline.a** · 05/11/2009, 18h07

Ah ok, désolé !
Mais toujours pas mieux...
Cette fonction là n'a pas l'air de vouloir marcher, et en plus elle fait foirer ma fonction Expand...
Du coup je me suis dit que la première, même si elle ne prend pas en compte les 2eme niveau, avait l'air d'être + stable.
J'ai quand même essayé avec ce que tu m'as dit mais j'ai toujours l'erreur Objet attendu...

Code :

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

1
2
3
4
5
6
7
8
9
function expandM(idpl) {
var les_li = idpl.getElementsByTagName("li");
var les_ul = document.getElementById("buh").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";
}

Bon je ne désespère il doit bien y avoir un moyen !!

**emmeline.a** · 05/11/2009, 18h11

Effectivement ça a l'air d'aller mieux comme ça ! (et dire que je ne l'ai même pas vu par moi-même...)
Je m'y remet demain, merci beaucoup pour toutes tes réponses !
Je te tiens au courant...si ça t'intéresse :p
A+

**emmeline.a** · 06/11/2009, 09h23

Salut salut,

Alors effectivement ça marche mieux mais c'est pas encore ça... En fait la première fonction devrait finalement suffire à ce que je recherche, de plus, la seconde que tu m'as proposé, étant donné qu'elle n'appelle pas la fonction expand, ne gère pas tout seul les changements des images + en -.
Alors, à partir de là... La fonction marche uniquement sur le premier menu qu'elle rencontre... Est ce que je dois me résigner à utiliser ta 2e fonction ?

Code :

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

1
2
3
4
5
function expandM(idpl) {
var les_li = idpl.getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcourt les menus pour les déplier
  expand(les_li[i]);
}

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
 <img src="images/plus_all.gif" / class="all" width="15" height="15" ALT="Permettra de regrouper tous les &quot;+&quot;" onclick="expandM(this.parentNode)"> 
    <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>
    <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>

EDIT : j'ai oublié de dire qu'en utilisant ce code tel quel, j'avais quand même une erreur "Objet requis", même si le 1er menu est déroulé.
A+

**E.Bzz** · 06/11/2009, 09h55

Envoyé par emmeline.a

EDIT : j'ai oublié de dire qu'en utilisant ce code tel quel, j'avais quand même une erreur "Objet requis", même si le 1er menu est déroulé.

Faudrait voir le code HTML complet (ici on ne voit pas le parentNode auquel l'appel fait référence, par exemple ...
Car c'est visiblement ton paramètre qui n'est pas le bon.

A+

**emmeline.a** · 06/11/2009, 10h05

Hmm, en fait là je t'ai donné pratiquement tout le html... Je n'ai pas défini de ParentNode quelque part

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
<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 &quot;+&quot;" onclick="expandM(this.ParentNode)"> 
    <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="buhm2">
      <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>

et toute ma fonction 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
// 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 = idpl.getElementsByTagName("li");  // Récupère la liste des menus
for (var i=0; i<les_li.length; i++)  // Parcourt les menus pour les déplier
  expand(les_li[i]);
}

JS : Ouvrir plusieurs Expand dans une page HTM

JavaScript

Discussions similaires

Partager

Partager