javascript et la propriete display
bonsoir,
voici 2 exemples indépendants. Ce problème apparaît sous IE et FF (et sans doute sur les autres navigateurs).
1er exemple : le style display est défini dans la partie <style></style>
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
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<html>
<head>
<title></title>
<style type="text/css">
<!--
li{
cursor: pointer;
}
.SousMenu{
display: none;
}
//-->
</style>
<script type="text/javascript">
<!--
function GestionMenu(objet){
var objetFils = "Sous"+objet.id;
var elmt = document.getElementById(objetFils);
alert("style.display= "+elmt.style.display);
if (elmt.style.display=="none")
elmt.style.display = "block";
else
elmt.style.display = "none";
}
//-->
</script>
</head>
<body>
<ul>
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
<ul id="SousMenu1" class="SousMenu">
<li>Sous menu11</li>
<li>Sous menu12</li>
<li>Sous menu13</li>
</ul>
<li id="Menu2" onclick="GestionMenu(this)">Menu 2</li>
<ul id="SousMenu2" class="SousMenu">
<li>Sous menu21</li>
<li>Sous menu22</li>
<li>Sous menu23</li>
</ul>
</ul>
</body>
</html> |
2ème exemple
le style display est défini dans les balises ul concernées :
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
43
44
45
46
47
48
49
50
51
| <html>
<head>
<title></title>
<style type="text/css">
<!--
li{
cursor: pointer;
}
//-->
</style>
<script type="text/javascript">
<!--
function GestionMenu(objet){
var objetFils = "Sous"+objet.id;
var elmt = document.getElementById(objetFils);
alert("style.display= "+elmt.style.display);
if (elmt.style.display=="none")
elmt.style.display = "block";
else
elmt.style.display = "none";
}
//-->
</script>
</head>
<body>
<ul>
<li id="Menu1"onclick="GestionMenu(this)">Menu 1</li>
<ul id="SousMenu1" style="display: none">
<li>Sous menu11</li>
<li>Sous menu12</li>
<li>Sous menu13</li>
</ul>
<li id="Menu2" onclick="GestionMenu(this)">Menu 2</li>
<ul id="SousMenu2" style="display: none">
<li>Sous menu21</li>
<li>Sous menu22</li>
<li>Sous menu23</li>
</ul>
</ul>
</body>
</html> |
Lors du 1er clic sur Menu1 ou Menu2 peut-on me dire pourquoi dans l'exemple 1 style.display="" (alors qu'il défini comme none). Il eut été logique que style.display="none" s'affichât, mais ce n'est pas le cas. Par conséquent, dans l'exemple 1, je dois attendre le second clic sur Menu1 ou Menu2 pour le test du display soit pris en compte.
Quelqu'un a une idée??
PS: il est vrai que je peux modifier la condition pour le script de l'exemple 1 fonctionne normalement, mais ce n'est pas ce qui m'intéresse.
