contraer los demas items

Citar

Escrito el 19 Nov 2007 12:08 am

Tengo este js que hace que cambie el estilo de una div
con el estilo definido en un CSS

javascript:
(le envio el nombre de la div y le cambia el estilo segun corresponda.)

Código :

<script type="text/javascript">

function expandcollapse (postid) {
boton = document.getElementById(postid);
if (boton.className=="postshown") {
   boton.className="posthidden";
   }
   else {
      boton.className="postshown";
   }   
}

</script>

CSS:

Código :

.posthidden {display:none}
.postshown {display:inline}

HTML:

Código :

<a href='#' class='boton' onclick='javascript:expandcollapse("Articulos0")'>Vegetarianos</a>

            <span class="posthidden" id="Articulos0">
                  <a class="sub-boton" href="#">Productos Alimenticios</a>
                  <a class="sub-boton" href="#">Otros</a>
               </span>
            <a href='#' class='boton' onclick='javascript:expandcollapse("Articulos1")'>Vitaminas</a>
            <span class="posthidden" id="Articulos1">
                  <a class="sub-boton" href="#">Premium Pax</a>
                  <a class="sub-boton" href="#">Jarabes</a>
               </span>
            <a href='#' class='boton' onclick='javascript:expandcollapse("Articulos2")'>Frutos secos</a>

            <span class="posthidden" id="Articulos2">
                  <a class="sub-boton" href="#">Frutos</a>
                  <a class="sub-boton" href="#">Tropicales</a>
               </span>

Bueno la cosa es ke necesito que al desplegar un sub menu...
y luego desplegar otro , el anterior se cierre
no tengo idea de como lograrlo pues me costo mucho hacer este.

si tienen alguna idea se los agradeceria..

Por egoman

61 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Concepción - Chile!

Citar

Escrito el 19 Nov 2007 07:11 pm

hola...

una posible solucion seria tener una variabe donde guardas el ultimo abierto, o sea,

Código :


var anteriroBtn = null
function expandcollapse (postid) {
   boton = document.getElementById(postid);
   if(anteriorBtn!=null && anteriorBtn != boton)
       anteriorBtn.className="posthidden";
   
   if (boton.className=="postshown") {
       boton.className="posthidden";
   }else {
      boton.className="postshown";
   }

  anteriorBtn = boton;
}

</script>

Saludos

Por 3w

145 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email Web

Citar

Escrito el 23 Nov 2007 07:04 pm

MUCHAS GRACIAS!
no se me habia ocurrido.
La verdad pensaba que javascript era un poco mas complicado al espesificar etiquetas o IDs.
gracias, aprendi algo más.

Por egoman

61 de clabLevel

Genero:Masculino

Envíale un mensaje privado Email

Concepción - Chile!

Citar

Escrito el 29 Nov 2007 08:20 pm

probe el segundo codigo y no me funcionó, aca hice otro que funciona pero me gustaria que al hacer rollout desaparezca el menu contextual
Script

CSS

html

<body>
<a href='#' class='boton' onmouseover='javascript:expandcollapse("Articulos0")' >Vegetarianos</a>

<a href='#' class='boton' onmouseover='javascript:expandcollapse("Articulos1")'>Vegetarianos</a>

<div class="posthidden" id="Articulos0">
<ul>
<li><a class="sub-boton" href="#">Penticios</a></li>
<li><a class="sub-boton" href="#">Osadtros</a></li>
</ul>
</div>

<div class="posthidden" id="Articulos1">
<ul>
<li><a class="sub-boton" href="#">Pmmmms</a></li>
<li><a class="sub-boton" href="#">Otrasdasos</a></li>
</ul>
</div>

</body>

avisen si lo pueden mejorar saludos!!

Por matiasnicolas

58 de clabLevel

Genero:Masculino

Envíale un mensaje privado

contraer los demas items

Escribe una respuesta rapida