Código Javascript:
Ver original
var ultima_caja = null; $("a#mnu_desplegable").click(function() { var btn = $(this),posicion = btn.position(),cadena_accion=null,btn_name=btn.attr('name'); var caja=$('#contenedor_'+btn_name); if (caja.attr('id') != ultima_caja) { $('a#mnu_desplegable').removeClass('activo'); $("div.n_contenedor").hide(); ultima_caja = null; } if (caja.css('display') === 'block') { $('a#mnu_desplegable').removeClass('activo'); caja.hide(); ultima_caja = null; }else{ caja.css({top: (posicion.top+btn.height()), left: posicion.left}); caja.show(); btn.addClass('activo'); ultima_caja ='#contenedor_'+btn_name; } return false; }); $("div.n_contenedor").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("a#mnu_desplegable").length==0) { $("a#mnu_desplegable").removeClass("activo"); $("div.n_contenedor").hide(); ultima_caja=null; } });
Hasta aqui, este codigo muestra una div al hacer click en el enlace y pone una clase 'activo' al enlace.. si se da click a otro enlace con id '#mnu_desplegable' oculta el div anterior y quita la clase 'activo' al enlace y al mismo tiempo activa el nuevo..
Si se hace click sobre alguna otra parte de la web oculta el menu desplegado..
lo unico que me falta lograr es que cuando un menu este desplegado y se clic sobre el mismo, este se oculte.
Alguna ayuda! :) Gracias!