mi codigo es este:
Código:
con q eventos de jquery puedo lograr q al cargar la pagina solo aparesca el titulo del menu y al hacer click en este titulo de menu se expandan las opciones q este contiene?? y a su vez al volver a hacer clic en el titulo del menu sus submenus se oculten y al hacer click en el titulo de otro menu la lista expandible de ese menu q esta activo se oculte y se muestren los submenus del nuevo titulo de menu activo???.... agradeceria mucho su ayuda amigos... de antemano gracias... <!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>
<link type="text/css" rel="stylesheet" href="css/estilo.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menú Toggle</title>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(img/left.png)"});
});
});
</script>
</head>
<body>
<div style="float:left" >
<p class="menu_list"><strong>Inventario </strong></p>
<div id="firstpane" class="menu_list">
<p class="menu_head">Carga de Datos</p>
<div class="menu_body">
<a href="#">Cargar Archivo</a>
<a href="#">Ingreso Manual</a>
<a href="#">Estado Cargas</a>
</div>
<p class="menu_head">Inspección</p>
<div class="menu_body">
<a href="#">Generar Pautas</a>
<a href="#">Inspecciones</a>
<a href="#">Estado Inspecciones</a>
</div>
<p class="menu_head">Reportes</p>
<div class="menu_body">
<a href="#">Resumen</a>
<a href="#">Detalle Inventario</a>
</div>
<p class="menu_head">Mantenedor</p>
<div class="menu_body">
<a href="#">Unidad</a>
<a href="#">Marca/Modelo</a>
</div>
</div>
</div>
</body>
</html>
