Accéder à des éléments

Version imprimable

Bonjour,

Je souhaite afficher des éléments dd d'un sous-menu à l'aide de javascript mais je n'arrive pas à les sélectionner. Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
	    <div id="menu">
		    <dl>
		    	<dt><a href="#">Accueil</a>
		    		<dd><a href="a">Sous-menu 1-1</a></dd>
		    		<dd><a href="a">Sous-menu 1-2</a></dd>
		    		<dd><a href="a">Sous-menu 1-3</a></dd>
		    	</dt>
		    	<dt><a href="#">Exercices</a>
		    		<dd><a href="a">Sous-menu 2-1</a></dd>
		    		<dd><a href="a">Sous-menu 2-2</a></dd>
		    		<dd><a href="a">Sous-menu 2-3</a></dd>
		    	</dt>
		    	<dt><a href="#">Documentations</a>
		    		<dd><a href="a">Sous-menu 3-1</a></dd>
		    		<dd><a href="a">Sous-menu 3-2</a></dd>
		    		<dd><a href="a">Sous-menu 3-3</a></dd>
 
		    	</dt>
		    </dl>
	    </div>

Et le code JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function addEventMenu () {
	var menu = document.getElementById('menu');
	var menuPrincipal = menu.getElementsByTagName('dt');
	for(var i=0; menuPrincipal.length>i; i++) {
		menuPrincipal[i].onmouseover = function () {
			showMenu(this);
		};
	}
}
 
function showMenu(elementMenu) {
	alert(elementMenu);
	var sousMenu = elementMenu.getElementsByTagName('dd');
	for(var i=0; sousMenu.length>i; i++) {
		sousMenu[i].style.display = 'block';
	}
}

Je n'arrive pas à sélectionner les éléments dd qui se trouvent sous elementMenu (dt) avec le hover. J'ai essayé plusieurs façons mais sans succès. Avez-vous une piste ?

Merci pour votre aide

25/09/2012, 18h45
NoSmoking

Bonjour,
il s'agit plus d'une méconnaissance des balises DL, DT et DD qu'autre chose :
DL est parent de DT et de DD mais DT est frère, et non parent, de DD, donc getElementsByTagName('DD') retournera toujours une nodeList vide.

Les listes de définitions : mal utilisées ou mal comprises ?

Merci pour cette réponse, effectivement j'ai remplacé bêtement mes ul li avec les dl, dd et dt. La balise dt doit se fermer avant. Voici mon nouveau code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<dl>
		    	<dt><a href="#">Accueil</a></dt>
		   		<dd><a href="a">Sous-menu 1-1</a></dd>
		   		<dd><a href="a">Sous-menu 1-2</a></dd>
		   		<dd><a href="a">Sous-menu 1-3</a></dd>
 
		    	<dt><a href="#">Exercices</a></dt>
		   		<dd><a href="a">Sous-menu 2-1</a></dd>
		    	<dd><a href="a">Sous-menu 2-2</a></dd>
		    	<dd><a href="a">Sous-menu 2-3</a></dd>
 
		    	<dt><a href="#">Documentations</a></dt>
		    	<dd><a href="a">Sous-menu 3-1</a></dd>
		    	<dd><a href="a">Sous-menu 3-2</a></dd>
		   		<dd><a href="a">Sous-menu 3-3</a></dd>
		    </dl>

Et pour accéder aux éléments dd, j'utilise la manière suivante :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function addEventMenu () {
	var menu = document.getElementById('menu');
	var menuPrincipal = menu.getElementsByTagName('dt');
	for(var i=0; menuPrincipal.length>i; i++) {
		menuPrincipal[i].onmouseover = function () {
			showMenu(this);
		};
	}
}
 
function showMenu(elementMenu) {
	var elementMenu = elementMenu.nextSibling;
	while (elementMenu != null && elementMenu.nodeName != 'DT') {
		if(elementMenu.nodeName == 'DD') {
			elementMenu.style.display = 'block';
		}
		var elementMenu = elementMenu.nextSibling;
	}
}

Merci encore pour l'aide