ponerle stop a los menus principales

julita_punch · #1 (**permalink**) 23/06/2010, 01:57

hola amigos

encontre este codigo muy bueno para tener un menu en js
pero si quisiera ponerle un stop para que cuando este despleagado menu uno
pueda visualizar el menu dos y ambos se puedan ver abiertos que tendria que hacer ?

muchas gracias

<html>
<head>
<title>Ejemplo de menu </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
var result;
function obtenerid(dentrodeque){
frase=document.getElementById(dentrodeque).innerHT ML;
result=new Array();
result=frase.match(/\b\s+id=[^>\s]+\b/g);
for(ii=0;ii<result.length;ii++){
result[ii]=result[ii].split('"').join('');
result[ii]=result[ii].split('id=').join('');
result[ii]=result[ii].split(' ').join('');
}
}
function mostrar(que){
for(ii=0;ii<result.length;ii++){
if(que==result[ii]){
if(document.getElementById(que).style.display=='no ne'){document.getElementById(que).style.display='b lock';}else{document.getElementById(que).style.dis play='none';}
}else{
eval("document.getElementById('"+result[ii]+"').style.display='none'");
}
}
}
function ir(url){
window.location=url;
}
</script>
<style type="text/css">
.principal{
background-color: #FFFFFF;
border-color: #FF0000;
border-style: solid;
border-width: 1px;
color: #FF0000;
font-weight: bold;
margin: 4px;
padding: 4px;
text-align: center;
cursor: pointer;
cursor: hand;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
.secundario{
background-color: #FFFFFF;
border-color: #000000;
border-style: solid;
border-width: 1px;
color: #000000;
font-weight: bold;
margin: 4px;
padding: 4px;
text-align: center;
cursor: pointer;
cursor: hand;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>
</head>

<body bgcolor="#9999CC" onload="obtenerid('contenedor_menu')">
<div id="contenedor_menu" style="width:100px;">

<div class="principal" onclick="mostrar('uno')">menu uno</div>
<div id="uno" style="display:none;">
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 1 1</div>
</div>


<div class="principal" onclick="mostrar('dos')">menu dos</div>
<div id="dos" style="display:none;">
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 2 1</div>
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 2 2</div>
</div>


<div class="principal" onclick="mostrar('tres')">menu tres</div>
<div id="tres" style="display:none;">
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 3 1</div>
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 3 2</div>
<div class="secundario" onclick="ir('/new/ejemplos/menuarbol.php#')">sub 3 3</div>
</div>

</div>
</body>
</html>

Adler · #2 (**permalink**) 23/06/2010, 06:40

Hola

Prueba con este

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function desplegar(que) {
tag = document.getElementById(que);
tag.style.display = (tag.style.display == "none") ? "block" : "none";
}
</script>
</head>
 
<body>
<div onclick="desplegar('tabla1')">Desplegable 1</div>
<table id="tabla1" style="display: none">
<tr><td>elemento1</td></tr>
<tr><td>elemento2</td></tr>
<tr><td>elemento3</td></tr>
<tr><td>elemento4</td></tr>
<tr><td>elemento5</td></tr>
</tr>
</table>
 
 
<div onclick="desplegar('tabla2')" >Desplegable 2</div>
<table id="tabla2" style="display: none;">
<tr><td>elemento1</td></tr>
<tr><td>elemento2</td></tr>
<tr><td>elemento3</td></tr>
<tr><td>elemento4</td></tr>
<tr><td>elemento5</td></tr>
</table>
</body>
</html>

PD: Usa las etiquetas de código, por que ver como se comportaba, he tenido que corregir algunos errores

Suerte

julita_punch · #3 (**permalink**) 23/06/2010, 10:48

perfecto Adler

me faltaba "block" : "none"; ?

gracias por la correccion ..¡¡¡¡