Como usar la misma funcion mas de una vez??

sqa212 · #1 (**permalink**) 31/12/2004, 01:16

Tengo una funcion que al hacer click en un link se expande un menu debajo,
consigo que uno funcione bien, pero no consigo hacer mas de uno,
creo que es porque no puedo usar mas de una vez el mismo id<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"></style>
<script language="javascript"></script>

</head>

<body>
<ul id="menuList">
<li class="menubar"><a class="heading" id="HeadingExpand" href="#">Click
<ul class="menu" id="MenuExpand">
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
</ul>
</li>
</ul>
<ul id="menuList">
<li class="menubar"><a class="heading" id="HeadingExpand" href="#">Click
<ul class="menu" id="MenuExpand">
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
</ul>
</li>
</ul>
</body>
</html>

JavierB · #2 (**permalink**) 31/12/2004, 04:41

Hola sqa212

Para empezar, estás poniendo el mismo id a más de un elemento y eso no es correcto, los id no deben repetirse.

Para solucionar tu problema, pon la segunda lista de esta forma:

Código HTML:

<ul id="menuList2">
<li class="menubar"><a class="heading" id="HeadingExpand2" href="#">Click
<ul class="menu" id="MenuExpand2">

Y la función que llamas en onload la dejas así:

Código HTML:

window.onload = function() {
initializeMenu("MenuExpand", "HeadingExpand");
initializeMenu("MenuExpand2", "HeadingExpand2");
}

También tienes por ahí algunas etiquetas <a> que nos has cerrado.

Saludos,

sqa212 · #3 (**permalink**) 31/12/2004, 05:03

Gracias Javier, funciona correctamente.

Feliz Año Nuevo!!!!!

JavierB · #4 (**permalink**) 31/12/2004, 09:37

Me alegro mucho. Feliz año 2004+1

lexus · #5 (**permalink**) 31/12/2004, 10:17

hola perdon por meterme pero me gusto el menu asi que lo modifique un poco..
sera qeu se puede hacer lo mismo pero que nosea dandole clic sino pasando el mouse por encima?
aqui dejo el codigo modificado, espero me puedan colaborar.
de antemano gracias.

puse en negrita con rojo algo que no es necesario para mi pero no se como quitarlo tambien me gustaria que me ayudaran en esa parte.

en si lo que necesito es mostrar y ocultar un elemento al pasar por encima mi mouse como una tabla por ejemplo
gracias .

Código:

 
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"><!--
.menu {
padding-left: 2px;
font-weight: normal;
font-size: 12px;
padding-bottom: 4px;
padding-top: 2px;
font-family: Verdana, Arial, Helvetica;
padding-right: 0px;
display: none;
}
body {
background-color: #0099FF;
}
--></style>
<script language="javascript"><!--
if (!document.getElementById)
document.getElementById = function() { return null; }
function initializeMenu(menuId, actuatorId) {
var menu = document.getElementById(menuId);
var actuator = document.getElementById(actuatorId);
if (menu == null || actuator == null) return; 
actuator.onclick = function() {
var display = menu.style.display;
this.parentNode.style.backgroundImage =
(display == "block") ? "url(img/plus.gif)" : "url(img/minus.gif)";
menu.style.display = (display == "block") ? "none" : "block";
return false;
}
}
window.onload = function() {
initializeMenu("MenuExpand", "HeadingExpand");
initializeMenu("MenuExpand2", "HeadingExpand2");
}
//--></script>
</head>
<body>
<ul id="menuList">
<li class="menubar"><a href="#" id="HeadingExpand" >Click</a>
<ul class="menu" id="MenuExpand">
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
<li>Esto se Muestra al hacer click</li>
</ul>
</li>
</ul>
<ul id="menuList2">
<li class="menubar"><a href="#" id="HeadingExpand2" >Click</a>
<ul class="menu" id="MenuExpand2">
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
<li>Esto es lo que no consigo mostrar</li>
</ul>
</li>
</ul>
</body>
</html>