Affichage dynamique

**Yakuzan** · 08/04/2009, 21h28

Jusqu'a maintenant ma page à un menu avec des bouton [+] et des boutons [-]. Lorsqu'on clique sur le [+] l'image change pour un [-] et des liens s'affichent dans la boite du bas. Mon problème c'est que si je pèse deux des boutons la fonction du premier n'est pas désactiver et le contenu afficher reste présent donc le second contenu s'affiche à la suite de l'autre.

J'ai pris le temps de prendre un SS pour faciliter la compréhension de mon problème.
http://img.photobucket.com/albums/v2...ko/imgcopy.png

JS du moment:

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
 
 
function foldOut(div,img) {
      var dis = document.getElementById(div);
      var image = document.getElementById(img);
 
      if (dis.style.display == 'none') 
		{
         dis.style.display = 'block';
         image.src = 'images/minusFold.png';
        }
	  else 
		{
         dis.style.display = 'none';
         image.src = 'images/plusFold.png';
		}
 
   }

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
<div id="mainBox">  <!--All content box-->
			<ul class="menu">
					<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show1' , 'l1' );">
								<img src="images/plusFold.png" alt="PLUS" id="l1"/></a>
								Link1
					</li>
 
 
 
					<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show2' , 'l2' );">
								<img src="images/plusFold.png" alt="PLUS" id="l2"/></a>
								Link2
					</li>
 
 
						<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show' , 'l3' );">
								<img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
								Link3
					</li>
 
 
						<li>
 
								<a href="#" 
 
								onclick="foldOut( 'show' , 'l4' );">
								<img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
								Link4
					</li>
			</ul>
					<div class="linkSection">
							<p class="showUp"  id="show1" >
								Allo
							</p>
								<p class="showUp"  id="show2" >
								Allo le monde.
							</p>
 
					</div>
 
 
 
	</div>
 
	</body>

Je ne sais pas comment exprimer ce que je veux faire, SVP de l'aide!

**emmanuel.remy** · 09/04/2009, 00h54

Le problème c'est que quand tu cliques sur un menu, il faut penser à cacher le texte précédemment affiché et remettre la bonne image associée.

ERE

**Yakuzan** · 09/04/2009, 01h13

J'ai resolu mon probleme, mais j'utilise 4 function qui regarde si chaque image et contenu son afficher, sa fait beaucoup de ligne de code haha...

Je demanderais a mon prof si il y a une maniere plus propre.

**RomainVALERI** · 09/04/2009, 08h33

Envoyé par Yakuzan

J'ai resolu mon probleme, mais j'utilise 4 function qui regarde si chaque image et contenu son afficher, sa fait beaucoup de ligne de code haha...

Je demanderais a mon prof si il y a une maniere plus propre.

Demande à nous d'abord

allez montre les ces fonctions si verbeuses, qu'on voie si ya moyen de les optimiser un peu

**emmanuel.remy** · 09/04/2009, 10h21

Pourtant il suffit d'enregistrer l'élément actif

et d'en changer à chaque nouvelle sélection. Effectivement il doit y avoir de l'optimisation dans l'air

ERE

**Yakuzan** · 09/04/2009, 22h43

Attention aux yeux:

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
function foldOut(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis1.style.display == 'none' ) 
		{
 
         paraDis1.style.display = 'block';
         dot1.src = 'images/minusFold.png';
		 paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		 paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
		 paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis1.style.display = 'none';
         dot1.src = 'images/plusFold.png';
 
		}
}
 
function foldOut2(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis2.style.display == 'none' ) 
		{
 
         paraDis2.style.display = 'block';
         dot2.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
		  paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis2.style.display = 'none';
         dot2.src = 'images/plusFold.png';
 
		}
}
 
function foldOut3(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis3.style.display == 'none' ) 
		{
 
         paraDis3.style.display = 'block';
         dot3.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		  paraDis4.style.display = 'none';
		 dot4.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis3.style.display = 'none';
         dot3.src = 'images/plusFold.png';
 
		}
}
 
function foldOut4(){
 
						/*------------------
						Putting each bullet into variable.
						--------------------*/
						var dot1 = document.getElementById("l1");
						var dot2 = document.getElementById("l2");
						var dot3 = document.getElementById("l3");
						var dot4 = document.getElementById("l4");
 
						/*------------------
						Putting each <p> into variable.
						--------------------*/
						var paraDis1 = document.getElementById("show1");
						var paraDis2 = document.getElementById("show2");
						var paraDis3 = document.getElementById("show3");
						var paraDis4 = document.getElementById("show4");
 
			 if (paraDis4.style.display == 'none' ) 
		{
 
         paraDis4.style.display = 'block';
         dot4.src = 'images/minusFold.png';
		 paraDis1.style.display = 'none';
		 dot1.src = 'images/plusFold.png';
		  paraDis2.style.display = 'none';
		 dot2.src = 'images/plusFold.png';
		  paraDis3.style.display = 'none';
		 dot3.src = 'images/plusFold.png';
        }
	  else 
		{
         paraDis4.style.display = 'none';
         dot4.src = 'images/plusFold.png';
		}
}

foldout1 et 2 et 3 et 4 sont identiques, c'est juste les variables qui sont affecter de maniere differente.

**emmanuel.remy** · 10/04/2009, 00h20

Attention aux yeux:

Effectivement

Je te propose ce script qui reste dans ton esprit:

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
 
    <script type="text/javascript">
      var imgPlusMinus=null;  //l'image affichée sous la forme d'un minus
      var bandeau = null; //le bandeau affiché
 
      function foldOut(div,img) {
            //on restitue l'image plus
            if (imgPlusMinus !=null) imgPlusMinus.src = 'images/plusFold.png';
            //on cache le bandeau du bas
            if (bandeau != null) bandeau.style.display="none";
 
            //on stocke le nouveau bandeau...
            bandeau = document.getElementById(div);
            //... et la nouvelle image
            imgPlusMinus = document.getElementById(img);
 
            //et on affiche
            bandeau.style.display = 'block';
            imgPlusMinus.src = 'images/minusFold.png';
 
         }  
    </script>

Avec de code 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
39
 
<div id="mainBox">  <!--All content box-->
  <ul class="menu">
   <li>
       <a href="#" onclick="foldOut( 'show1' , 'l1' );">
           <img src="images/plusFold.png" alt="PLUS" id="l1"/></a>
           Link1
   </li>
   <li>
        <a href="#" onclick="foldOut( 'show2' , 'l2' );">
           <img src="images/plusFold.png" alt="PLUS" id="l2"/></a>
            Link2
    </li>
    <li>
         <a href="#" onclick="foldOut( 'show3' , 'l3' );">
	  <img src="images/plusFold.png" alt="PLUS" id="l3"/></a>
          Link3
    </li>
    <li>
          <a href="#" onclick="foldOut( 'show4' , 'l4' );">
          <img src="images/plusFold.png" alt="PLUS" id="l4"/></a>
	   Link4
     </li>
  </ul> 
  <div class="linkSection">
   <p class="showUp"  id="show1" style="display:none">
	    Allo
   </p>
   <p class="showUp"  id="show2" style="display:none">
   	    Allo le monde.
   </p>
   <p class="showUp"  id="show3" style="display:none">
            Allo le World.
   </p>
   <p class="showUp"  id="show4" style="display:none">
   	    Allo le Mondo.
   </p>
  </div>
</div>

Cela fonctionne comme tu le souhaites.

ERE

Affichage dynamique

JavaScript

Discussions similaires

Partager

Partager