script fonctionne avec Firefox mais boucle sous IE6

**ignitionflip** · 28/01/2009, 10h07

Bonjour,
Voici ma page html complète :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<style type="text/css">
ul,li{list-style:none;}
</style>
 
<script language="JavaScript">
<!--
var expanded = null;
var memopen = null;
var expandedsubs;
var memosubs;
 
function SwitchMenu(id){
var expand = document.getElementById(id);
 
if(expand.style.display != "block"){
//open
if(expanded != null){ //if a menu is already shown
//is there a memo ?
if(memopen != null){
//yes :
//am I a sub of memo ?
var issub = false;
memosubs = memopen.getElementsByTagName("ul");
for (var i=0; i<memosubs.length; i++){
if(memosubs.id == expand.id){issub = true;}
}
if(issub == true){
//yes :
//close expanded
expanded.style.display = "none";
// memo stray the same
}else{
//no :
//close memo and all its subs
memopen.style.display = "none";
memosubs = memopen.getElementsByTagName("ul");
for (var i=0; i<memosubs.length; i++){
memosubs.style.display = "none";
}
//destroy memo pointer
memopen = null;
}
}else{
//no :
//is current menu a sub of expanded ?
var issub = false;
expandedsubs = expanded.getElementsByTagName("ul");
for (var i=0; i<expandedsubs.length; i++){
if(expandedsubs.id == expand.id){issub = true;}
}
if(issub == true){
//yes :
//dont close expanded
memopen = expanded;
//memo becomes expanded
}else{
//no :
//close expanded
expanded.style.display = "none";
}
}
}
//show current menu
expand.style.display = "block";
//expanded becomes expand
expanded = expand;
}else{
expand.style.display = "none";
}
}
 
</script>
</head>
<body>
 
<div id='LayerNav' style='position:absolute; left:-30px; z-index:1'>
<ul id='menulink'>
<li onclick="SwitchMenu('menu1')"><a href="#">menu1</a></li>
<ul id='menu1' style='display:none; text-indent:-35px'>
<li onclick="SwitchMenu('submenu11')"><a href="#">submenu11</a></li>
<ul id='submenu11' style='display:none; text-indent:-65px'>
<li><a href="www.google.com">link1</a></li>
<li><a href="www.google.com">link2</a></li>
</ul>
<li onclick="SwitchMenu('submenu12')"><a href="#">submenu12</a></li>
<ul id='submenu12' style='display:none; text-indent:-65px'>
<li><a href="www.google.com">link1</a></li>
</ul>
</ul>
<li onclick="SwitchMenu('menu2')"><a href="#">menu2</a></li>
<ul id='menu2' style='display:none; text-indent:-35px'>
<li onclick="SwitchMenu('submenu21')"><a href="#">submenu21</a></li>
<ul id='submenu21' style='display:none; text-indent:-65px'>
<li><a href="www.google.com">link1</a></li>
<li><a href="www.google.com">link2</a></li>
</ul>
<li onclick="SwitchMenu('submenu22')"><a href="#">submenu22</a></li>
<ul id='submenu22' style='display:none; text-indent:-65px'>
<li><a href="www.google.com">link1</a></li>
</ul>
</ul>
</ul>
</div>
</body>
</html>

Tout fonctionne sous Firefox mais avec IE il semble que la fonction est appelée 2 fois de suite !
Je ne comprend vraiment pas le problème.
Merci de votre aide.

**E.Bzz** · 28/01/2009, 10h25

Bonjour,
pas bien compris la structure de tes listes, mais le <a href> là ne sert à rien : enlève-le

Code :

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

<li onclick="SwitchMenu('menu1')"><a href="#">menu1</a></li>

A+

**SpaceFrog** · 28/01/2009, 10h29

le style des ul n'est pas initialisé dans les balises ...

**E.Bzz** · 28/01/2009, 10h35

Envoyé par SpaceFrog

le style des ul n'est pas initialisé dans les balises ...

@ignitionflip > IE ne sait donc pas le récupérer via JS et tes tests tels que

Code :

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

if(expand.style.display != "block")

deviennent caduques [NDT]

A+

**ignitionflip** · 28/01/2009, 14h19

Merci à tous pour ces réponses.

Envoyé par E.Bzz

Bonjour,
pas bien compris la structure de tes listes, mais le <a href> là ne sert à rien : enlève-le

Code :

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

<li onclick="SwitchMenu('menu1')"><a href="#">menu1</a></li>

A+

en fait j'utilise ce "faux anchor" pour avoir le curseur "main" au survol du pointeur sourie. j'ai essayé sans mais le problème reste entier.

Envoyé par SpaceFrog

le style des ul n'est pas initialisé dans les balises ...

comment ça ? je ne peu pas utiliser l'attribut style dans une balise ul ?
pourtant le "display" est correct.

Envoyé par E.Bzz

@ignitionflip > IE ne sait donc pas le récupérer via JS et tes tests tels que

Code :

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

if(expand.style.display != "block")

deviennent caduques [NDT]

A+

sisi, ces tests fonctionnent sous IE, si j'ajoute un

Code :

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

alert(expand.style.display);

il me renvoi bien l'information.

en fait sous IE (et uniquement sous IE, quoique pas testé sous Safari), tout va bien lorsque je clic un menu de 1er niveau, mais si je clic un "submenu" ma fonction est appelé 2 fois de suite ...
Je soupçonne un problème avec l'utilisation de l'événement "onclick" sous IE mais vraiment je ne trouve aucune piste

**E.Bzz** · 28/01/2009, 14h22

Envoyé par ignitionflip

en fait j'utilise ce "faux anchor" pour avoir le curseur "main" au survol du pointeur sourie.

A vos ordre :

Code :

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

<li onclick="SwitchMenu('menu1')" style="cursor:pointer;">menu1</li>

A+

**ignitionflip** · 28/01/2009, 15h31

Envoyé par E.Bzz

A vos ordre :

Code :

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

<li onclick="SwitchMenu('menu1')" style="cursor:pointer;">menu1</li>

A+

excellent ! je fais compliqué pour faire simple moi des fois

par contre toujours ce même soucie, est-ce que quelqu'un à pu tester cette page ? une idée, une petite piste ? j'en perd mon latin (pas très frais il est vrai)

**E.Bzz** · 28/01/2009, 15h37

Il y a des "chances" que ton clic dans le sous-menu déclenche aussi le onclick du menu parent ...

Fais une recherche sur CancelBubble et stopPropagation, le sujet a souvent été abordé ...

A+

**ignitionflip** · 28/01/2009, 16h10

Envoyé par E.Bzz

Il y a des "chances" que ton clic dans le sous-menu déclenche aussi le onclick du menu parent ...

Fais une recherche sur CancelBubble et stopPropagation, le sujet a souvent été abordé ...

A+

merci je ne connaissais pas cette propriété.
je rajoute

Code :

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