Salut,

Le problème suivant est un problème de logique pur et dur !

L'objectif est d'afficher (display:block) l'arborisation d'un menu progressivement onmouseover sur les éléments de l'arborisation et de les cacher (display:none) selon certaine condition onmouseout.

L'arborisation est la suivante :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
menu
    menu1
        sousmenu1
            sousmenu11
                soussousmenu11
                soussousmenu12
            sousmenu12
                soussousmenu21
                soussousmenu22
            sousmenu13
    menu2
On note que l'on fera un onmouseover sur un menu1 et un sousmenu11 (groupement d'entités) tandis que l'on fera un onmouseout sur un sousmenu1 et un soussousmenu11 (une seule entité)

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
<div id="menu">
	<div id="menu1" onmouseover="affiche(this,2,'');">
		<a href="#" onclick="myfunction();">Ajouter</a>
		<div id="sousmenu1" onmouseout="affiche(this,2,'');">
			<div id="sousmenu11" onmouseover="affiche(this,2,'');">
				<a href="#" onclick="myfunction();">Materiel</a>
				<div id="soussousmenu11">
					<div>
						<a href="#" onclick="myfunction();">Informations du Materiel</a>
						<a href="#" onclick="myfunction();">Fichiers du Materiel</a>
						<a href="#" onclick="myfunction();">Levageurs du Materiel</a>
					</div>							
				</div>
			</div>
		</div>
		<div>
			<a href="#" onclick="myfunction();">Constructeur</a>
		</div>
		<div>
			<a href="#" onclick="myfunction();">Levageur</a>
		</div>
		<div>
			<a href="#" onclick="myfunction();">Type</a>
		</div>
		<div>
			<a href="#" onclick="myfunction();">Localisation</a>
		</div>
		<div>
			<a href="#" onclick="myfunction();">Deplacement</a>
		</div>
	</div>
	<div id="menu2" onmouseover="affiche(this,2,'');">
		<a href="#" onclick=":myfunction();">Mofifier</a>
		<div id="sousmenu2" onmouseout="affiche(this,2,'');">
			<div id="sousmenu21" onmouseover="affiche(this,2,'');">
			<a href="#" onclick="myfunction();">Materiel</a>
				<div id="soussousmenu21">
					<div>
						<a href="#" onclick="myfunction();">Informations du Materiel</a>
						<a href="#" onclick="myfunction();">Fichiers du Materiel</a>
						<a href="#" onclick="myfunction();">Levageurs du Materiel</a>
					</div>							
				</div>
			</div>
		</div>
	</div>
</div>
pour afficher l'arborescence, le onmouseover est simple on demande d'afficher le sousmenu enfant de celui sur lequel on se trouve:

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
 
function affiche(obj,nSM,idSSM) {
	var id = obj.id;
	var nSSM = 6;
	//var j = '';
 
	for(var i=1;i<=nSM;i++) {
		for(var j=1;j<=nSSM;j++) {
			if(document.getElementById('sousmenu'+i+j)) {
				document.getElementById('sousmenu'+i+j).style.display = "none";
				}
			}
		document.getElementById('sousmenu'+i).style.display = "none";
		}
 
	if(document.getElementById('sous'+id)) {
		document.getElementById('sous'+id).style.display = "block";
		}
	}
Maintenant, le problème c'est de rajouter les bonnes conditions sur ce onmouseover pour que lorsqu'il reset tous les block de menu à chaque fois de tel sorte que onmouse out on fait aussi affiche() et il reset tout à display="none"

Le souci maintenant c'est qu'il ne veut plus m'afficher materiel qui contient une sous arborescence et je ne comprend pas pourquoi ??