Hola!
Tengo un problema con un menú dinámico que estoy haciendo usando un
menu.js, no se si alguien de este foro me pudiera ayudar:
El problema es que en mi html tengo por ejemplo el menú Archivo, con 3
hijos que son: Open, save y Send, y este ultimo tiene todavía 3 hijos que
son Page by E-Mail, Link by E-Mail, Shortcut to Desktop. De la siguiente
manera:
Archivo
Open
Save
Send
..Page by E-Mail
..Link by E-Mail
..Shortcut to Desktop
Y por un menú dinámico se despliegan solamente los hijos de Send
Hasta aqui todo me funciona muy bien
Solo que si quiero añadir mas elementos con sus hijos y mas hijos no me
los despliega, solamente el primero que tenga hijos si los despliega, los
demas no.
este es mi código en Java:
function menu()
{
// Variables, modificar en caso de querer utilizar otros nombres de clases
var parentClass='isParent'; //gets applied when the LI has a nested UL
var activeParentClass='isActive'; //gets applied when the nested UL is
visible
var preventHoverClass='nohover'; //denotes a navigation that should not
get any hover effects
var indicateJSClass='dhtml'; //gets applied to the main navigation when
Javascript is available
var toHideClass='cerrado'; //gets applied to hide the nested UL
var toShowClass='abierto'; //gets applied to show the nested UL
var currentClass='current'; //denotes the current active sub element
and prevents collapsing
var d=document.getElementById('menu'); //denotes the navigation element
// comprueba que el navegador tiene soporte DOM
if(!document.getElementById && !document.createTextNode){return;}
// si existe un elemento con id menu le aplica una clase que lo convierte
en menu dinamico
if(d)
{
if(d.className==''){
d.className = indicateJSClass;
}else {
d.className += ' '+indicateJSClass;
}
var lis,i,firstUL,j,apply;
// recorre todos los LI y mira a ver cuales tienen un UL anidado
lis=d.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
firstUL=lis[i].getElementsByTagName('ul')[0];
// si existe un UL anidado, desactiva el primer enlace anidado y aplica la
clase para mostrar que hay una lista anidada
if(firstUL)
{
lis[i].childNodes[0].onclick=function(){return false;}
lis[i].className+=lis[i].className==''?parentClass:' '+parentClass;
// comprueba si hay algún elemento de la clase "current"
apply=true;
if(new
RegExp('\\b'+currentClass+'\\b').test(lis[i].className)){apply=false;}
if(apply)
{
for(j=0;j<firstUL.getElementsByTagName('li').length;j++)
{
if(new
RegExp('\\b'+currentClass+'\\b').test(firstUL.getElementsByTagName('li')[j].className)){apply=false;break}
}
}
// si no hay ningun elemento de la calse "current", aplica la clase para
esconder la lista anidada
if(apply)
{
//firstUL.className+=firstUL.className==''?toHideClass:'
'+toHideClass;
if(firstUL.className=='')
{
firstUL.className = toHideClass;
}else {
firstUL.className += ' '+toHideClass;
}
// comprueba si existe una clase para prevenir que se abra el menu al
hacer mouseovery aplica solo la funcion
// al evento onclick si ese es el caso, en caso contrario la aplica al
evento onclick y al onmouseover
if(new RegExp('\\b'+preventHoverClass+'\\b').test(d.className))
{
lis[i].onclick=function(){abreocierra(this);}
} else {
lis[i].onclick=function(){abreocierra(this);}
lis[i].onmouseover=function(){abreocierra(this);}
lis[i].onmouseout=function(){abreocierra(null);}
}
// si hay un elemento de clase current, define la lista par aque
permanezca abierta y aplica las
// clases para mostrar la lista anidada y define el LI padre como activo.
} else {
lis[i].keepopen=1;
//firstUL.className+=firstUL.className==''?toShowClass:'
'+toShowClass;
if(firstUL.className=='')
{
firstUL.className = toShowClass;
}else {
firstUL.className += ' '+toShowClass;
}
lis[i].className=lis[i].className.replace(parentClass,activeParentClass);
}
}
}
}
// funcion que muestra y esconde las listas anidadas y añade las clases a
los LI padres.
function abreocierra(o)
{
var childUL,isobj,swap;
// recorre todos los LI de la navegacion
lis=d.getElementsByTagName('li');
for(i=0;i<lis.length;i++)
{
isobj=lis[i]==o;
// funcion para intercambiar las clases en un objeto
swap=function(tmpobj,tmporg,tmprep)
{
tmpobj.className=tmpobj.className.replace(tmporg,tmprep)
}
// si el LI no tiene un indicador para permanecer visible
if(!lis[i].keepopen)
{
childUL=lis[i].getElementsByTagName('ul')[0];
// comprueba si existe un UL anidado y si el LI actual no es le que ha
sido clickado
// e intercambia las clases de acuerdo con esto (por ejemplo: esconde
todos los otros LI's anidados y
// hace a los Li's padres activos).
if(childUL)
{
if(new RegExp('\\b'+preventHoverClass+'\\b').test(d.className))
{
if(new RegExp('\\b'+activeParentClass+'\\b').test(lis[i].className))
{
swap(childUL,isobj?toShowClass:toHideClass,isobj?toHideClass:toShowClass);
swap(lis[i],isobj?activeParentClass:parentClass,isobj?parentClass:activeParentClass);
} else {
swap(childUL,isobj?toHideClass:toShowClass,isobj?toShowClass:toHideClass);
swap(lis[i],isobj?parentClass:activeParentClass,isobj?activeParentClass:parentClass);
}
} else {
swap(childUL,isobj?toHideClass:toShowClass,isobj?toShowClass:toHideClass);
swap(lis[i],isobj?parentClass:activeParentClass,isobj?activeParentClass:parentClass);
}
}
}
}
}
}
window.onload=function()
{
menu();
// añadir aqui cualquier otra funcion que se quiera lanzar en el evento
onLoad
}
Espero que alguien me pueda ayudar =(
Leer las respuestas