Discussion :

[gunthar]

Hello,
J'aimerais créer un menu déroulant a 3 niveaux avec un HTML du type
<ul>
<li>
<ul>
<li></li>
<li></li>
.........................
</ul>
</li>
</ul>

pour ce faire j'ai fait un JS que voici :

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
 
function buildsubmenus(){
 
	var liTags 				= $('menu').getElementsByTagName("ul")[0].childNodes;
	var currentNumItemSel	= '';
	var defaultSelElem		= '';
 
	for (var i = 0; i < liTags.length; i++){
		showFirstNav(liTags[i],i);
		if(liTags[i].className == 'selected'){
			defaultSelElem = i;
		}
	}
 
	function showFirstNav(item2Show,numItem){
 
		item2Show.onmouseover 	= function(){
			if(currentNumItemSel){
				currentItemSel 		= liTags[currentNumItemSel].childNodes;
				if(currentItemSel[3]){
					hideItem(currentItemSel[3]);
					liTags[currentNumItemSel].className = "";
				}
			}else{
				liTags[defaultSelElem].className = "";
				hideItem(liTags[defaultSelElem].childNodes[3]);
			}
 
			currentNumItemSel 	= numItem;
			currentNode 		= item2Show.childNodes;
 
			if(currentNode[3]){
				showItem(currentNode[3]);
				liTags[currentNumItemSel].className = "selected";
				showNextNav(currentNode[3].childNodes);
			}
		}
 
	}
 
	function showNextNav(nnElem){
		for (var i = 0; i < nnElem.length; i++){
			nextItem = nnElem[i].childNodes;
			if(nextItem.length > 1){
				nnElem[i].onmouseover = function(){
					showItem(this.childNodes[1]);
				}
				nnElem[i].onmouseout = function(){
					hideItem(this.childNodes[1]);
				}
			}
		}
	}
 
	function hideItem(navItem){
		navItem.style.display = "none";
	}
 
	function showItem(navItem){
		navItem.style.display = "block";
	}
 
}

Donc ce que je fais grossomodo c'est que je prend tout les <li> de premier niveau au quel je leur applique un événement de survolle puis je m'occupe des enfants de ce même <li>

Le problème vient de cette ligne (ligne 25 ) (entre autre, mais si je règle ce problème, je règle les autres )
liTags[defaultSelElem].childNodes[3]

le truc c'est que le childNodes[3] en FF correspond a un tag <ul> et en IE ca correspond a je sais pas trop bien quoi par contre si je fait ceci liTags[defaultSelElem].childNodes[2] ca fonctionne dans IE mais plus dans FF, j'ai bien essayer de faire un liTags[defaultSelElem].childNodes.getElementsByTagName("ul") mais ca me gènère un bug...

Un solution ?
Merci d'avance

[Bovino]

L'explication :

Code :

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

1
2
3
4
<ul>
<li>
</li>
</ul>

Pour FF, chaque saut de ligne est un noeud, pour IE non.

[SpaceFrog]

oui le souci provient de la différence d'interprétation des childNodes

Code :

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

liTags[currentNumItemSel].childNodes;

le decompte IE et FFX diffère ...

Fais une recherche sur le forum avec le mot "nodeCleaner"