Menú desplegable: al clicar un botón también hace clic a sus
Publicado: 2011-09-22 11:36 @525
He creado un sencillo menú desplegable con listas anidadas. La idea es que al hacer onClick en un elemento de lista, me llame a una función que averiguará el id del elemento de la lista sobre el que se ha hecho clic.
El problema es que si hago clic en un elemento de lista anidada, me muestra el id de éste pero también el de sus ancestros.
¿Alguna solución?
Gracias.
HTML
JS
El problema es que si hago clic en un elemento de lista anidada, me muestra el id de éste pero también el de sus ancestros.
¿Alguna solución?
Gracias.
HTML
Using html4strict Syntax Highlighting
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <title></title>
- <link rel="stylesheet" href="estilo.css" type="text/css" media="screen"></link>
- <script type="text/javascript" src="biblioteca.js"></script>
- </head>
- <body>
- <ul id="menu">
- <li id="boton_Ordenadores" >ORDENADORES
- <ul id=sub_Ordenadores>
- <li id="boton_Sobremesas">sobremesas</li>
- <li id="boton_Portatiles">portatiles</li>
- </ul>
- </li>
- <li id="boton_Tablets">TABLETS</li>
- <li id="boton_Componentes" >COMPONENTES
- <ul id=sub_Componentes>
- <li id="boton_Procesadores">procesadores
- <ul id=sub_Procesadores>
- <li id="boton_Intel">intel</li>
- <li id="boton_Amd">amd</li>
- <li id="boton_Ibm">ibm</li>
- </ul>
- </li>
- <li id="boton_Placas">placas base</li>
- <li id="boton_Discos">discos duros</li>
- <li id="boton_Fuentes">fuentes</li>
- </ul>
- </li>
- </ul>
- </body>
- </html>
Coloreado en 0.003 segundos, usando GeSHi 1.0.8.4
JS
Using javascript Syntax Highlighting
- var descens = new Array();
- var numdescens;
- var idclic;
- function ObtenDescens(idpadre,tagdescen)
- {
- descens=document.getElementById(idpadre).getElementsByTagName(tagdescen);
- numdescens=descens.length;
- //alert("num descendientes "+tagdescen+": " + numdescens);
- }
- function replegar()
- {
- ObtenDescens(this.id,"ul")
- document.getElementById(descens[0].id).style.display='none'
- }
- function desplegar()
- {
- ObtenDescens(this.id ,"ul")
- document.getElementById(descens[0].id).style.display="block";
- }
- function quienclic()
- {
- idclic=this.id
- alert(idclic)
- }
- window.onload = function()
- {
- ObtenDescens("menu","li");
- for(i=0;i<numdescens;i++)
- {
- document.getElementById(descens[i].id).onmouseover = desplegar;
- document.getElementById(descens[i].id).onmouseout = replegar;
- document.getElementById(descens[i].id).onclick = quienclic;
- }
- ObtenDescens("menu","ul");
- for(i=0;i<numdescens;i++)
- {
- document.getElementById(descens[i].id).style.display="none";
- }
- }
Coloreado en 0.002 segundos, usando GeSHi 1.0.8.4