JS : Ouvrir plusieurs Expand dans une page HTM

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

Alalaaa
C'est vraiment à 2 doigts de la perfection !

Là ça fait tout comme je veux mis à part que la fonction ExpandM n'a l'air d'agir que sur le 2eme niveau des menus.

Un petit schéma ça faisait longtemps :
Au début :
+ (all)
+ Menu1
+ Menu2
event : clic sur + (all)
-> rien ne se passe

Mais !

Si au début :
+ (all)
- Menu1
+ Item1
- Menu2
+ Item2
event : clic sur + (all)
+ (all)
- Menu1
- Item1
blabla
- Menu2
- Item2
blibli

C'est grave docteur ?

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

Arf !
La cachotière qui fait des modifs en douce !

C'était pas au programme, ça

Code :

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

1
2
3
4
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]);

Laisse comme c'était

Code :

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

1
2
for (var i=0; i<les_ul.length; i++) { // Parcours les menus pour les afficher
  les_ul[i].style.display="block";

ça fonctionne mieux

A+

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

Ben en fait j'avais essayé comme ça mais ça marchait moins bien :s
Erreur ligne 10, objet attendu.

Du coup je me suis dit que j'allais tester différemment (avec le expand(les_ul[i]); )et je n'obtenais pas d'erreur. C'est pour ça que je me suis dit (à priori à tort :s) que c'était ptet la bonne solution.

Tu as une idée pour cette erreur ?

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

Envoyé par E.Bzz

Laisse comme c'était

Code :

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

1
2
for (var i=0; i<les_ul.length; i++) { // Parcours les menus pour les afficher
  les_ul[i].style.display="block";

ça fonctionne mieux

Pas d'erreur chez moi, et tout se déplie

A+

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

Tu n'aurais pas modifié autre chose entre temps ?

A+

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

effectivement tout se déplie bien mais quand même cette erreur 10...
qu'est ce que j'ai encore trafiqué...

EDIT: si tu as quelque chose sous la main (genre le htm ou le JS) pourrais tu le poster pour que je puisse comparer ?
ça me parait bizarre quand même !

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

Un nouveau copié/collé de ton code actuel ?

Tu as peut-être oublié un des tests à ajouter (où j'ai peut-être oublié quelque chose) ...

A+

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

Ah si, j'avais corrigé autre chose, mais comme c'est purement HTML, je pense pas que ça joue

Code :

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

<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'))">

Y avait un / qui traînait au milieu : à enlever
Et les quottes du "+" mal mises : c'était des doubles alors qu'il faut des simples (ou alors protéger les doubles)

A+

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

Oui c'est ptet mieux dans ce sens là

EDIT : avec tes modifs dans l'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
35
36
37
38
39
40
41
42
43
// 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.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 = '[+]';
				}
		  }
		}
      }
}
 
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]);
}
}

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" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'));changeimg(this)">
    <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>

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

Marrant ça !

Quand on enlève le changeimg(this) que tu as ajouté, y a plus d'erreur

A+

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

pff
il faut vraiment que j'arrête de prendre des initiatives toutes pourries...

Merci pour tout !

EDIT : Oublie moi ! ma fonction marche après vérification :-)
allez soyons fous une dernière après j'arrête tout et je me remet à mon visual basic adoré :p

j'ai essayé de faire la fonction réciproque (qui regroupe tout)
elle marche bien mais qu'une seule fois :s
si je fais +all suivi de -all j'ai tout comme il faut
mais si je rappuie sur +all plus rien ne se passe...
t'aurais une idée?

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
52
53
54
55
56
57
// 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.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 = '[+]';
				}
		  }
		}
      }
}

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_li;
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';
  //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='none';
	expand(les_li[j]); //c'est mieux comme ça
}
}

Encore merci pour tout
Bon weekend à toi

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
<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" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'));">
<img src="images/moins_all.gif" class="all" width="15" height="15" onclick="expandN(document.getElementById('buh'));expandN(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>

**E.Bzz** · 06/11/2009, 16h18

C'est qu'il n'y avait pas besoin de tant de code, dans ce sens là

Code :

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

1
2
3
4
5
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';
}

Pas besoin de masquer les <li>, puisque les <ul> qui les contiennent sont masqués

A+

**emmeline.a** · 06/11/2009, 16h21

Ah oui du coup ça marche aussi avec ta fonction ;-)

on se la refait, bon weekend !!

**E.Bzz** · 06/11/2009, 16h24

Bon week-end

**emmeline.a** · 09/11/2009, 10h01

Salut E.Bzz,

C'est encore moi ^^
J'ai à nouveau une question sur ce code.
En fait quand je clique sur le clic_all, l'image + associé à Menu1 et Menu2 ne se change pas en -, par contre celle des item1 et item2 oui.
Je pense savoir d'où ça vient étant donné que dans la fonction ExpandM on n'applique pas la fonction Expand tout court aux UL, qui gère la modif d'image.

J'ai essayé d'intégrer une fonction à part (même si je ne suis pas sûre que ce soit la meilleure idée) :

Code :

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

1
2
3
4
5
6
7
function changeimg(monimage) {
for ( var b=0; b<document.images.length; b++ ) {
	if  (document.images.src == 'images/plus.gif') {
	document.images.src  = 'images/moins.gif';
}
}
}

Code :

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

<img src="images/plus_all.gif" class="all" width="15" height="15" onclick="expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'));changeimg(document.getElementsByTagName('img'))">

Qu'en penses-tu ?

PS : noté pour le résolu, là je l'enlève, je le remettrais si je n'ai pas de news vu que la question principale a été résolue.

**emmeline.a** · 09/11/2009, 14h20

J'ai trouvé une fonction qui fait à peu près ce que je veux :

Code :

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

1
2
3
function ChangeImg(nom_de_l_image, chemin_de_l_image){
   document.getElementById(nom_de_l_image).src = chemin_de_l_image;
}

Code :

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

<img src="images/plus_all.gif" class="all" width="15" height="15" onclick="ChangeImg('IMAGE', 'images/moins.gif');ChangeImg('IMAGE1', 'images/moins.gif');expandM(document.getElementById('buh'));expandM(document.getElementById('Buh2'))">

Et j'ai ajouté des ID à mes images +.

Le seul problème qu'il me reste c'est que quand j'appuie 2 fois consécutives sur le + all, les images + des items se retransforme en +, alors que vu qu'il sont dépliés il devrait restés afficher en -.

A+

**E.Bzz** · 12/11/2009, 09h48

Envoyé par emmeline.a

Le seul problème qu'il me reste c'est que quand j'appuie 2 fois consécutives sur le + all, les images + des items se retransforme en +, alors que vu qu'il sont dépliés il devrait restés afficher en -.

Vu le code ci-dessus, ça ne peut pas venir de cette fonction

Ca doit être ta fonction expand() qui la modifie entre temps, non ?

A+

JS : Ouvrir plusieurs Expand dans une page HTM

JavaScript

Discussions similaires

Partager

Partager