JS : Ouvrir plusieurs Expand dans une page HTM

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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:

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"> Menu <ul class="toc" style="display:none"> <li> <img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9"> Item1 <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 !

Bonjour,
avec

Code:

<ul id="le_menu">

Code:

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+

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:

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:

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

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

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:

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+

05/11/2009, 15h01
E.Bzz

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

A+

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:

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"> Menu <ul class="toc" style="display:none"> <img src="images/plush3.gif" onclick="expand(this.parentNode)" class="icoh3" width="9" height="9"> Item1 <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:

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 :D)

05/11/2009, 15h28
E.Bzz
Citation:

Envoyé par emmeline.a

le revoilà tout propre

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

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"> Item1 ...
Mais sinon, pas de raison que ça marche pas :koi:

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

A+
05/11/2009, 15h53
emmeline.a

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: :ccool:
05/11/2009, 15h58
E.Bzz

Citation:

Envoyé par emmeline.a

si il voit un autre id=le_menu ?

:triste:
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:

document.getElementById('le_menu')

par

Code:

document.getElementById(ton_nouveau_parametre)

A+

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:

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 ?:calim2:

Citation:

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:

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:

document.getElementById('Test')

au lieu de

Code:

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+

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

Avec la fonction

Code:

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:

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:

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)

05/11/2009, 17h33
E.Bzz
Non non, c'est pas loin :D

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:

onclick="expandM('le_menu')"

Alors qu'avec ton appel

Code:

onclick="expandM(this.parentNode)"

il faudrait que la fonction soit
Code:

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+

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 :D
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 // 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 ;)

Ah ben oui, mais si tu repars d'une version précédente, on va avoir du mal à se comprendre :aie:
Mon dernier post concernait cette version là :
Code:

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 :oops: (corrigée dans le post précédent)

A+

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:

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

05/11/2009, 18h11
emmeline.a

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+

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:

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:

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

06/11/2009, 09h55
E.Bzz

Citation:

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+

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

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

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]);
}

:calim2:

Voir 40 message(s) de cette discussion en une page