Foros del Web » Programando para Internet » Javascript »

Controlar mejor un menu desplegable

Estas en el tema de Controlar mejor un menu desplegable en el foro de Javascript en Foros del Web. Hola a todos. Necesito un poco de ayuda. Tengo que lidiar con un menu vertical desplegable en acordeón y mi fuerte no es precisamente javascript ...
  #1 (permalink)  
Antiguo 06/03/2012, 19:05
 
Fecha de Ingreso: abril-2009
Ubicación: Barcelona
Mensajes: 113
Antigüedad: 15 años
Puntos: 9
Pregunta Controlar mejor un menu desplegable

Hola a todos.

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:
<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>
Espero que podais echarme un cable. Gracias

Etiquetas: controlar, desplegable, funcion
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 01:22.