Discussion :

[sd]

Bonjour a toutes et a tous,

Je sais que je titre n'est pas très parlant mais je ne sais pas comment expliquer mon problème en quelques mots, le voici:

J'ai un menu dit "accordéon" qui affiche ses enfants (sous-menu) grâce au onmouseover

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
 
<dl>         
  <dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
  <dd id="smenu1">
    <ul>
      <li><a href="#">Sous-Menu 1.1</a></li>
      <li><a href="#">Sous-Menu 1.2</a></li>
    </ul>
  </dd>
</dl>
<dl>         
  <dt onmouseover="javascript:montre('smenu2');">Menu 1</dt>
  <dd id="smenu1">
    <ul>
      <li><a href="#">Sous-Menu 2.1</a></li>
      <li><a href="#">Sous-Menu 2.2</a></li>
    </ul>
  </dd>
</dl>

Code js:

Code :

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

1
2
3
4
5
6
7
8
9
 
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i))
               {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}

J'ai rajouté un setTimeout pour la vitesse d'ouverture de ces enfants, tout marche très bien sauf un petit détail, si l'on passe avec sa souris sur le menu entier en moins d'une fraction de seconde après le delay du setTimeout mes sous-menu s'ouvre 1 par 1, se qui est logique vu que l'on appel la fonction a chaque onmouseover.

Comment contrer ce problème? La est la question...

Merci pour toute aide, solution...

sd

[Bovino]

Avant de lancer un nouveau setTimeout, désactive les précédents avec un clearTimeout.

[sd]

Merci pour ta réponse Bovino,

Effectivement j'ai vu que l'on pouvais annulé un setTimeout, cependant je ne sait pas à quel moment le faire vu que j'appelle a chaque survol la même fonction...

[Bovino]

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var timer = false;
function montre(id) {
if(timer){clearTimeout(timer)}
else{timer = setTimeout(function(){
timer = false;
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i))
               {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
},1000);
}
}

[sd]

Merci beaucoup pour ta patience et ton aide.

Cependant j'ai une petite question, car mon menu reste ouvert

Si je comprend bien le but est de testé "timer" (booleen), qui retourne true si il y a un setTimeout !?

J'ai essayé de définir cette variable en true par default, mais j'ai le même resultat (menu reste ouvert dès le load)

Quand je regarde le code source généré j'obtiens ça (se qui parait correct):

onmouseover="javascript:montre('toto');"

Merci encore de ton soutien

PS: en parallèle j'ai essayé de mettre simplement un onmouseout="clearTimeout();" mais je reviens a mon point de départ