menu tipo acordeon desplegable

kinyiro_360 · #1 (**permalink**) 05/06/2012, 12:58

ola a todos

necesito ayuda con un menu tipo acordeon ya casi lo tengo terminado solo tengo un detalle al abrir un submenu quiero q aga lo siguiente:

si no hay ningun submenu abierto q lo abra y lo demas se desplaze hacia abajo(esto ya lo tengo)
si ya hay un submenu abierto quiero q lo cierre y me habra el q acabo de seleccionar
(es aqui donde estoy batallando pues para cerrar el q esta abierto tengo q darle click nuevamente si no pues se quedan los abiertos)

si alguen me pudiera ayudar se lo agradeceria mucho

este es el codigo q tengo

function despliega(id)
{
var menu = document.getElementById(id);
if(menu.style.display == "none")
{
menu.style.display = "list-item";
menu.style.position = "relative";
}
else
{
menu.style.display = "none";
}
}

IsaBelM · #2 (**permalink**) 05/06/2012, 13:30

a ver si, mas o menos, es esto lo que quieres

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
.sel {color:#FF0000;}
.nosel {color:#000000;}
.selsub {color:#FFF555;}
.noselsub {color:#000000;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function versubmenu(val) {
objhl = document.getElementById(val);
obj = document.getElementById('sub_' +val);

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostrar';
objhl.className = (objhl==visto_color) ? 'nosel' : 'sel';

if ((visto_subm != null) && (visto_color != null)) {
visto_subm.className = 'ocultar';
visto_color.className = 'nosel';
}
//alert (visto_subm + " - " + visto_color)
//alert (obj + " - " + objhl)
visto_subm = (obj==visto_subm) ? null : obj;
visto_color = (obj==visto_color) ? null : objhl;
}

var visto_subsubm = null;
var visto_colorSUB = null;
function versubsubmenu(val) {
objhl = document.getElementById(val);
obj = document.getElementById(val+'sub');
obj.className = (obj==visto_subsubm) ? 'ocultar' : 'mostrar';
objhl.className = (objhl==visto_colorSUB) ? 'noselsub' : 'selsub';

if ((visto_subsubm != null) && (visto_colorSUB != null)) {
visto_subsubm.className = 'ocultar';
visto_colorSUB.className = 'noselsub';
}

visto_subsubm = (obj==visto_subsubm) ? null : obj;
visto_colorSUB = (obj==visto_colorSUB) ? null : objhl;
}
</script>
<head>
</head>
<body>
<div id="menu0" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU0</div>
<div id="sub_menu0" class="ocultar" style="z-index:1;">
<div id="m00" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="m00sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="m01" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="m01sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>

<div id="menu1" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU1</div>
<div id="sub_menu1" class="ocultar" style="z-index:1;">
<div id="m10" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="m10sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="m11" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="m11sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>

<div id="menu2" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU2</div>
<div id="sub_menu2" class="ocultar" style="z-index:1;">
<div id="m20" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="m20sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="m21" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="m21sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>

<div id="menu3" class="nosel" onclick="versubmenu(this.id)" style="z-index:1;">MENU3</div>
<div id="sub_menu3" class="ocultar" style="z-index:1;">
<div id="m30" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu0</div>
<div id="m30sub" class="ocultar" style="z-index:1;">
++ SubsubMenu0.0<br />
++ SubsubMenu0.1<br />
++ SubsubMenu0.2
</div>
<div id="m31" class="nosel" onclick="versubsubmenu(this.id)" style="z-index:1;">+ SubMenu1</div>
<div id="m31sub" class="ocultar" style="z-index:1;">
++ SubsubMenu1.0<br />
++ SubsubMenu1.1
</div>
</div>

</body>
</html>

kinyiro_360 · #3 (**permalink**) 05/06/2012, 15:52

gracias por la informacion

la verdad no tengo mucha experiencia con javascript
y tengo algunas dudas sobre el codigo q me proporcionas

en la linea

obj.className

a q clase se refiere

y en esta parte

? 'ocultar' : 'mostrar'

me imagino q se le pasan los valores del css o me equivoco

saludos

IsaBelM · #4 (**permalink**) 05/06/2012, 16:32

Cita:

obj.className = (obj==visto_subm) ? 'ocultar' : 'mostrar';

es una condicional ternaria. y dice: se le asignará al elemento "obj" la clase "ocultar" o "mostrar" si se cumple o no la condición de que "obj" sea igual a "visto_subm"

dicho de otro modo. si "obj" es igual a "visto_subm", al elemento se le asignará la clase "ocultar". de lo contrario se le asignará la clase "mostrar"

kinyiro_360 · #5 (**permalink**) 05/06/2012, 17:18

ola

muchas gracias por la informacion me fue de mucha ayuda
ya adapte el codigo a mi pagina y ya sali de mi problemilla

saludos

kinyiro_360 · #6 (**permalink**) 13/08/2012, 13:31

Cita:

Iniciado por IsaBelM

es una condicional ternaria. y dice: se le asignará al elemento "obj" la clase "ocultar" o "mostrar" si se cumple o no la condición de que "obj" sea igual a "visto_subm"

dicho de otro modo. si "obj" es igual a "visto_subm", al elemento se le asignará la clase "ocultar". de lo contrario se le asignará la clase "mostrar"

hola disculpa ya se que tiene algo de tiempo que pregunte esto pero el codigo que me pasaste lo estoy tratando de usar para otra cosas

tengo mi menu y los enlaces los tengo con linkbutton's de asp pero estan dentro de tablas y lo que intento hacer es que la dar click en el linkbutton me cambie de color de fondo la tabla del link al que le di click
esto ya lo logro hacer pero el problema es que como la pagina se recarga para cargar el contenido la tabla vuelve a su estado normal

yo necesito que se quede con el color de fondo

espero que me puedas ayudar de antemano muchas gracias