click sur la récupération du display [Résolu]

omelhor · 18/02/2011, 12h17

Bonjour,

Voilà mon problème.

J'ai 2 div avec les id "theme" et "choixTheme"

La div "choixTheme" par défault est cachée, avec de la proprieté display: none

Lorque je clique sur "Theme", cela doit afficher la div du dessous.

Or lors du 1er clique, cela ne marche pas, je suis obligé de cliquer 2 fois dessus.

Est-ce que quelqu'un aurait une idée svp ?

Merci bcp

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
 
<html>
 
<head>
<script type="text/javascript">
 
 
	function bascule(elem){
	   etat=document.getElementById(elem).style.display;
	   alert(etat);
	   if(etat=="none"){
	   document.getElementById(elem).style.display="block";
	   }
	   else{
	   document.getElementById(elem).style.display="none";
	   }
	}
 
</script>
 
 
<style type="text/css">
 
	div#theme{
		height: 20px;
		width: 120px;
		background-color: blue;
	}
	div#choixTheme {
		height: 120px;
		width: 120px;
		overflow: auto;
		border: 1px solid #666;
		background-color: #ccc;
		padding: 8px;
		display: none;
	}
</style>
 
</head>
 
<body>
 
<form name="myform" id="myform" action="#" method="POST">
	<div align="center"><br>
		<div id="theme" onclick="bascule('choixTheme'); ">Theme</div>
		<div id="choixTheme">
			<input type="checkbox" name="theme" value="theme1" > Milk<br>
			<input type="checkbox" name="theme" value="theme2" > Butter<br>
			<input type="checkbox" name="theme" value="theme3" > Cheese<br>
			<input type="checkbox" name="theme" value="theme4" > Milk<br>
			<input type="checkbox" name="theme" value="theme5" > Butter<br>
			<input type="checkbox" name="theme" value="theme6" > Cheese<br>
			<input type="checkbox" name="theme" value="theme7" > Milk<br>
			<input type="checkbox" name="theme" value="theme8" > Butter<br>
			<input type="checkbox" name="theme" value="theme9" > Cheese<br>
			<input type="checkbox" name="theme" value="theme10" > Milk<br>
			<input type="checkbox" name="theme" value="theme11" > Butter<br>
			<input type="checkbox" name="theme" value="theme12" > Cheese<br>
		</div>
	</div>
</form>
 
</body>
</html>

NoSmoking · 18/02/2011, 14h11

Citation:

Or lors du 1er clique, cela ne marche pas, je suis obligé de cliquer 2 fois dessus.

au début tu testes

Code :

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

etat=document.getElementById(elem).style.display;

mais si le display n'a pas été renseigné dans la balise celui vaudra "" donc la condition ne sera pas réalisé.

Tu peux partir du fait que la première fois il est caché donc en premier tu testes si il est affiché...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function bascule(elem) {
  var oElem = document.getElementById(elem);
  if (oElem) {
    if (oElem.style.display == "block") {
      oElem.style.display = "none";
    }
    else {
      oElem.style.display = "block";
    }
  }
}

ou tu mets display:none dans la balise

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email