Necesito un poco de ayuda. Tengo que lidiar con un menu vertical desplegable en acordeón y mi fuerte no es precisamente javascript (al menos por el momento).
Encontré un menú diseñado que cumple perfectamente, salvo por el inconveniente de que se cierra cuando se hace clic sobre el submenu y eso no me interesa.
La estructura del menu sería algo así:
Código HTML:
<ul> <li>1</li> <li>1</li> <ul> <li>2</li> <li>2</li> <li>2</li> </ul> </li></li> </li></li> </ul>
Lo que quiero es que si hago click sobre los <li>2</li> el menu no se cierre, se mantenga abierto hasta que haga click sobre el <ul> o sobre los <li>1</li>
El código javascript es el siguiente:
Código:
Espero que podais echarme un cable. Gracias <script type="text/javascript"> (function($){ $.fn.lksMenu=function(){ return this.each(function(){ // obtenemos el elemento que se esta analizando en esta vuelta del each var menu= $(this); // localizamos los links principales y le asignamos un evento click menu.find('ul li > a').bind('click',function(event){ // identificamos el elemento sobre el que se hizo click var currentlink=$(event.currentTarget); // los ul que tengan la clase active seran los que estan abiertos // si el link sobre que presionamos ya estaba abierto , es decir tenia // la clase active, lo cerramos y nada mas if (currentlink.parent().find('ul.active').size()==1) { //cerramos el link porque apretamos sobre el mismo abierto currentlink.parent().find('ul.active').slideUp('medium',function(){ // le quitamos la clase currentlink.parent().find('ul.active').removeClass('active'); }); } // si ningun link estaba apretado else if (menu.find('ul li ul.active').size()==0) { //no hace falta cerrar ninguno y solo abrimos el elemento al // cual se le hizo click show(currentlink); } else { // si ya habia un item abierto , simplemente lo localizamos // con find, y lo cerramos con slideup, menu.find('ul li ul.active').slideUp('medium',function(){ // esto antes era slideUp // una vez que cerramos el que estaba abierto // le quitamos la clase active menu.find('ul li ul').removeClass('active'); // abrimos uno nuevo que corresponde al que se clickeo show(currentlink); }); } }); // esta funcion es de soporte // todo lo que hace es abrir el elemento y asignarle la clase active function show(currentlink){ currentlink.parent().find('ul').addClass('active'); currentlink.parent().find('ul').slideDown('medium'); } }); } // ejecutamos la funcion y pasamos por parametro a jQuery. })(jQuery); </script>