Foros del Web » Programando para Internet » Jquery »

Duda con menu con java script tipo acordeon

Estas en el tema de Duda con menu con java script tipo acordeon en el foro de Jquery en Foros del Web. Hola gente tengo una duda este es el código que tengo para ejecutar un menú tipo acordeón en javascript : <script type="text/javascript" charset="utf-8"> $(function(){ $('#menucatalogo ...
  #1 (permalink)  
Antiguo 05/08/2013, 13:05
 
Fecha de Ingreso: agosto-2013
Mensajes: 2
Antigüedad: 11 años, 4 meses
Puntos: 0
Pregunta Duda con menu con java script tipo acordeon

Hola gente tengo una duda este es el código que tengo para ejecutar un menú tipo acordeón en javascript:
<script type="text/javascript" charset="utf-8">
$(function(){

$('#menucatalogo li a').click(function(event){
var elem = $(this).next();
if(elem.is('ul')){
event.preventDefault();
$('#menucatalogo ul:visible').not(elem).slideUp();
elem.slideToggle();
}

});
});
</script>

El tema es que el menú al cargar la pagina sale totalmente desplegado y me gustaría que saliese cerrado y se desplegase al pulsar, por cierto esta formado mediante listas anidadas para mas información. Por favor ayúdenme estoy desesperado y con la cabeza apunto de estallar
  #2 (permalink)  
Antiguo 05/08/2013, 15:04
darkhack3r22
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Duda con menu con java script tipo acordeon

Donde esta el importe de jquery??
  #3 (permalink)  
Antiguo 05/08/2013, 21:20
Avatar de exmatuz  
Fecha de Ingreso: mayo-2013
Mensajes: 9
Antigüedad: 11 años, 7 meses
Puntos: 1
Respuesta: Duda con menu con java script tipo acordeon

Amigo, yo tengo un menú tipo acordeón hecho con JS, te dejo el código para que lo cheques:

lmenu.js

Código Javascript:
Ver original
  1. (function($){
  2.  $.fn.lMenu=function(){
  3.  
  4.     return this.each(function(){
  5.  
  6.         var menu= $(this);
  7.  
  8.         menu.find('ul li > a').bind('click',function(event){
  9.  
  10.             var currentlink=$(event.currentTarget);
  11.  
  12.             if (currentlink.parent().find('ul.active').size()==1)
  13.             {
  14.  
  15.                 currentlink.parent().find('ul.active').slideUp('fast',function(){
  16.  
  17.                     currentlink.parent().find('ul.active').removeClass('active');
  18.                 });
  19.             }
  20.  
  21.             else if (menu.find('ul li ul.active').size()==0)
  22.             {
  23.  
  24.                 show(currentlink);
  25.             }
  26.             else
  27.             {
  28.  
  29.                 menu.find('ul li ul.active').slideUp('fast',function(){
  30.  
  31.                     menu.find('ul li ul').removeClass('active');
  32.  
  33.                     show(currentlink);
  34.                 });
  35.             }
  36.         });
  37.  
  38.  
  39.         function show(currentlink){
  40.             currentlink.parent().find('ul').addClass('active');
  41.             currentlink.parent().find('ul').slideDown('fast');
  42.         }
  43.     });
  44. }
  45. })(jQuery);


index.html

Código HTML:
Ver original
  1. <div class="menu">
  2.         <ul>
  3.             <li>
  4.                 <a id="Minicio" href="#"><img src="img/menu/index.png"></img> INICIO</a>
  5.             </li>
  6.             <li>
  7.                 <a href="#"><img src="img/menu/man.png"></img> PACIENTES</a>
  8.                 <ul>
  9.                     <li><a class="MaltaPaciente" href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Paciente</a></li>
  10.                     <li><a id="MlstPaciente" href="#"><img class="icosub" src="img/submenu/search.png"></img> Buscar Paciente</a></li>
  11.                     <li><a href="#"><img class="icosub" src="img/submenu/pdf.png"></img> Exportar Lista PDF</a></li>
  12.                     <li><a href="#"><img class="icosub" src="img/submenu/xls.png"></img> Exportar Lista EXCEL</a></li>
  13.                 </ul>
  14.             </li>
  15.             <li>
  16.                 <a href="#"><img src="img/menu/calendar.png"></img> CITAS</a>
  17.                 <ul>
  18.                     <li><a id="MaltaCitas"href="#"><img class="icosub" src="img/crud/add.png"></img> Ver/Agregar Cita</a></li>
  19.                     <li><a href="#"><img class="icosub" src="img/submenu/eye.png"></img> Ver Calendario</a></li>
  20.                     <li><a href="#"><img class="icosub" src="img/submenu/lista.png"></img> Citas Pendientes</a></li>
  21.                 </ul>
  22.             </li>
  23.             <li>
  24.                 <a href="#"><img src="img/menu/surgery.png"></img> CIRUGÍAS</a>
  25.                 <ul>
  26.                     <li><a href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Reservación</a></li>
  27.                     <li><a href="#"><img class="icosub" src="img/submenu/eye.png"></img> Ver Calendario</a></li>
  28.                     <li><a href="#"><img class="icosub" src="img/submenu/lista.png"></img> Cirugías Pendientes</a></li>
  29.                 </ul>
  30.             </li>
  31.             <li>
  32.                 <a href="#"><img src="img/menu/finanza.png"></img> FINANZAS</a>
  33.                 <ul>
  34.                     <li><a href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Nuevo Pago</a></li>
  35.                     <li><a href="#"><img class="icosub" src="img/submenu/rfinanza.png"></img> Reporte de Ganancias</a></li>
  36.                 </ul>
  37.             </li>
  38.             <li>
  39.                 <a href="#"><img src="img/menu/tools.png"></img> HERRAMIENTAS</a>
  40.                 <ul>
  41.                     <li><a href="#"><img class="icosub" src="img/submenu/imc.png"></img> Calcular IMC</a></li>
  42.                     <li><a href="#"><img class="icosub" src="img/submenu/calc.png"></img> Calculadora</a></li>
  43.                 </ul>
  44.             </li>
  45.             <li>
  46.                 <a href="#"><img src="img/menu/doctor.png"></img> TRABAJADORES</a>
  47.                 <ul>
  48.                     <li><a class="MaltaTrabajador" href="#"><img class="icosub" src="img/crud/add.png"></img> Agregar Trabajador</a></li>
  49.                     <li><a class="MlstTrabajador" href="#"><img class="icosub" src="img/submenu/lista.png"></img> Lista de trabajadores</a></li>
  50.                 </ul>
  51.             </li>
  52.             <li>
  53.                 <a href="#"><img src="img/menu/sistema.png"></img> SISTEMA</a>
  54.                 <ul>
  55.                     <li><a href="#"><img class="icosub" src="img/submenu/catalog.png"></img> Administrar Centro</a></li>
  56.                     <li><a href="#"><img class="icosub" src="img/submenu/db.png"></img> Respaldo BD</a></li>
  57.                 </ul>
  58.             </li>
  59.             <li>
  60.                 <a id="logout" href="controller/logout.php" title="Cerrar Sesión"><img src="img/menu/logout.png"></img> SALIR</a>
  61.             </li>
  62.         </ul>
  63.     </div>


Cualquier duda, ya sabes, no dudes en preguntar. saludos
  #4 (permalink)  
Antiguo 19/08/2013, 05:28
 
Fecha de Ingreso: agosto-2013
Mensajes: 2
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Duda con menu con java script tipo acordeon

Gracias por el aporte amigo, la verdad que soy novato y aun me cuesta un poco sigo investigándolo. Un saludo

Etiquetas: acordeon, java, javascript, tipo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:06.