Discussion :

[emmeline.a]

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]

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]

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]

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]

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

A+

[emmeline.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 :

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]

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+