Menu sous forme areborescente

Version imprimable

bonjour,
je developpe une application web en jsp. Je voudrais ajouter un menu a plusieurs niveaux sous forme arborescente, de telle sorte que je puisse faire apparaitre et disparaitre les sus menus. J'ai pensé à le faire en javascript.
voila mon menu:

Code:

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
 
<div id="menu">
  <ul>
     <li><a href="acceuil.jsp">Home</a></li
     ><ul>
         <li onclick="ElementStatus('Results','1','Results')" Style="Cursor:pointer;" >Results</li
         ><ul id="Results1" >
	      <li><a href="" >Results 1</a></li
	      ><li onclick="ElementStatus('Results','2','Results 2')" ><a href="" >Results 2</a></li
	      ><ul id="Results2" >
		   <li><a href="" >Results  2_1</a></li
		   ><li><a href="" >Results 2_2</a></li
		   ><li onclick="ElementStatus('Results','3','Results 3')" ><a href="" >Results 3</a></li
		   ><ul id="Results3">
                        <li><a href="" >Results 3_1</a></li
		        ><li><a href="" >Results 3_2</a></li
			><li><a href="" >Results 3_3</a></li
		   ></ul	
	       ></ul
             ></ul
	     ><li><a href="<%=targetTests%>" >Tests</a></li
	     ><li><a href="<%=targetProtocols %>" >Protocols</a></li
	></ul
     ></ul>
</div>

et voici ma fonction ElementStatus:

Code:

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
 
function ElementStatus(name, number, title){
        var divID = name + number;
	if( document.getElementbyId && document.getElmentById( divID ) ){
		Pdiv = document.getElementById( divID );
		PcH = true;
	}
	else if( document.all && document.all[ divID ] ){
		Pdiv = document.all[ divID ];
		PcH = true;
	}
	else if( document.layers && document.layers[ divID ] ){
		Pdiv = document.layers[ divID ];
		PcH = true;
	}
	else{
		PcH = false;
	}
	if( PcH ){
		if( Pdiv.className == 'cachediv' ){
			Pdiv.className = '';
		}
		else{
			Pdiv.className = 'cachediv';
		}
	}
}

mais ça ne marche, est-ce que j'ai oublié quelsue chose?!!:?

30/07/2007, 13h42
Nesmontou
Salut, qu'est-ce que tu veux dire par ça ne marche pas ? Messages d'erreur ? Comportement incohérent (dans ce cas, que se passe-t-il par rapport au comportement attendu) ? ...

Sinon, remplace tes
Code:

1 2 </li >
par

Code:

</li>
30/07/2007, 14h03
GlamIS

je viens de modifier les balises li, mais ça marche toujours pas = affiche le menu, mais quand je clique sur les elements il se passe rien !!!:(
30/07/2007, 14h23
batham

Bonjour,

A la sortie de ta fonction le booléen a quelle valeur ?

D'autre part, l'erreur pourrait aussi venir d'une erreur dans la css, qu'as tu dans "cachediv" ?

dans le css j'ai:

Code:

1
2
3
4
5
6
.cachediv{
	overflow:hidden;
	height: 1px;
	margin-top: -1px;
	position: absolute;
}

30/07/2007, 14h48
batham

bon j'ai vite testé ton code, il marche sous IE6 qui est très permissif, et non sous firefox.

En testant la valeur du booléen PcH, il passe à true sur le onclick de "Results" (donc on rentre bien dans les if) alors que dans firefox, PcH est à false.

Je pense donc que ton problème vient de tes conditions et de leur déclaration.
30/07/2007, 15h04
GlamIS

et comement je peux les modifier pour que ça marche sur firefox aussi!

ben déjà en modifiant le premier "if" et en corrigeant ta faute de frappe sur le

Code:

document.getElementById( divID )

et ensuite si cela te convient tu peux faire ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 .................. if( document.getElementById( divID ) ){ Pdiv = document.getElementById( divID ); PcH = true; // alert ("ById"); } else if( document.all[ divID ] ){ Pdiv = document.all[ divID ]; PcH = true; // alert('all'); } else if( document.layers[ divID ] ){ Pdiv = document.layers[ divID ]; PcH = true; // alert('layers'); } else{ PcH = false; } ......................
Ton code normalement devrait fonctionner, si cela te convient. Il ne reste plus qu'à virer les alert. D'autre part je ne comprends pas la nécessité de ton second else if... mais bon ça c'est ta sauce ;)

En espérant t'avoir un peu aidé.@+

30/07/2007, 15h23
GlamIS

ouaip ton code me convient tès bien, problème résolu!!! merci beaucoup batham :D