Mismo identificador en un menú desplegable

Bravenap · #1 (**permalink**) 25/06/2003, 17:07

Estoy intentando crear un menú deplegable a base de celdas. Utilizo la propiedad display para desplegar las secciones dentro de cada apartado general, pero cuando hay varias secciones en el mismo apartado utilizo el mismo nombre para poder desplegarlas todas. Pero sólo se me despliega una. Sé que el error está al darles el mismo nombre.

Os dejo aquí una muestra de lo que intento para ver si me podéis echar una mano.

Código:

<html>
<head>
<script language="JavaScript">
function despliega(n){
	for(i=1;i<=3;i++){
	obj=document.getElementById(i);
		if(n==i){if(obj){document.getElementById(i).style.display=''}}
		else{if(obj){document.getElementById(i).style.display='none'}}
	}
}
</script>
</head>

<body><basefont face="Arial">
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(1)"><font color="#FFFFFF"><strong>Inicio</strong></font></td>
  </tr>
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(2)"><font color="#FFFFFF"><strong>Novedades</strong></font></td>
  </tr>
  <tr id="2" style="display:none;"> 
    <td width="29">&nbsp;</td>
    <td width="121" bgcolor="#00CCFF"><strong><font color="#666666"><em>Proyectos</em></font></strong></td>
  </tr>
  <tr id="2" style="display:none;"> 
    <td>&nbsp;</td>
    <td bgcolor="#00CCFF"><strong><font color="#666666"><em>Becas</em></font></strong></td>
  </tr>
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(3)"><font color="#FFFFFF"><strong>Personal</strong></font></td>
  </tr>
  <tr id="3" style="display:none;"> 
    <td>&nbsp;</td>
    <td bgcolor="#00CCFF"><font color="#666666"><strong><em>Profesores</em></strong></font></td>
  </tr>
</table>
</body>
</html>

Tengo otro menú que funciona muy bien y que lo saqué del ScriptMaster, pero no se veía del todo bien en NS 7, y por eso he querido hacer este otro.

Gracias.

Helbira · #2 (**permalink**) 26/06/2003, 02:40

Si lo que pretendes es ahorrarte escribir tantos nombres a la hora de deplegarlas todas, opta por elegir nombres que solo se diferencien en un número (p.ej.: grupo1, grupo2, ...) y con un sencillo bucle las despliegas todas sin necesidad de escribir tanto.

Claro, que para saber cuando finalizar el bucle deberías tener un array que asociara el número de celdas en total que tiene cada grupo.

Un beso

Bravenap · #3 (**permalink**) 26/06/2003, 02:48

Gracias Helbira por tu respuesta (y por el beso

).

Ya había pensado en lo del bucle, pero quería intentar una solución más sencilla.

También estoy barajando la posibilidad de meter todos los submenúes en una sola celda de manera que se tenga que desplegar sólo una.

Probaré ambas cosas, incluyendo la de los vectores aunque no soy muy amigo de ellos, no porque no sean útiles sino porque siempre me lío con ellos.

Un saludo.

Bravenap · #4 (**permalink**) 26/06/2003, 03:03

Bueno, aquí dejo una primera solución. Voy a intentar escribirlo todo desde Javascript a partir de la información contenida en un vector pero más adelante y con más calma.

Código:

<html>
<head>
<script language="JavaScript">
function despliega(n){
	for(i=1;i<=3;i++){
	obj=document.getElementById(i);
		if(n==i){if(obj){document.getElementById(i).style.display=''}}
		else{if(obj){document.getElementById(i).style.display='none'}}
	}
}
</script>
</head>

<body><basefont face="Arial">
<table width="150" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(1)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Inicio</strong></font></td>
  </tr>
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(2)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Novedades</strong></font></td>
  </tr>
  <tr id="2" style="display:none;"><td> 
  	<table width="100%">
    	<td width="29"></td>
    	<td width="121" bgcolor="#00CCFF"><strong><font color="#666666"><em>Proyectos</em></font></strong></td>
	  </tr>
	  <tr> 
	    <td></td>
	    <td bgcolor="#00CCFF"><strong><font color="#666666"><em>Becas</em></font></strong></td>
	  </table>
  </td></tr>
  <tr bgcolor="#0066FF"> 
    <td colspan="2" onClick="despliega(3)" style="cursor:pointer;"><font color="#FFFFFF"><strong>Personal</strong></font></td>
  </tr>
  <tr id="3" style="display:none;"><td> 
    <table width="100%"><tr>
		<td width="29"></td>
    	<td bgcolor="#00CCFF"><font color="#666666"><strong><em>Profesores</em></strong></font></td>
	</tr></table>
  </td></tr>
</table>
</body>
</html>

Un saludo.