Bueno, he aquí un pequeño aporte sobre como hacer un menú desplegable en jquery. La idea es sencilla, lo que quería conseguir es que al hacer click en una sección, se abriera, y al hacer click en la misma, se cerrara. Si hay una sección abierta e intentamos abrir otra, la abierta se cierra y se abre ésta que hemos pulsado. Es bastante sencillo. Posteo el código.
Código Javascript
:
Ver original<script type="text/javascript">
$(document).ready(function(){
$("ul.subitem").hide(); //Ocultamos todos los submenús.
$("a.opcion").click( //...al hacer click...
function(){
var everyULs = $('ul.item').find("ul"); // everyULs = todas las uls.item
var thisUL = $(this).parent().find("ul.subitem"); // thisULs = ul en la que estamos trabajando
if(thisUL.is(':hidden')){ // si la ul en la que trabajamos esta oculta...
everyULs.slideUp('fast'); // ...cerramos todas para crear el efecto que queramos...
thisUL.slideDown('fast'); // ...y abrimos la que estamos trabajando. Así creamos el efecto deseado.
}else{
thisUL.slideUp('fast'); // Si la ul está visible, la cerramos al hacer click.
}
}
);
});
</script>
y el html quedaría algo así:
Código HTML:
Ver original <li><a class="opcion">Anathema
</a> <li><a>Fragile Dreams
</a></li> <li><a>A Simply Mistake
</a></li> <li><a class="opcion">Saturnus
</a> <li><a>The Fall of Nakkiel
</a></li> <li><a class="opcion">Supertramp
</a> <li><a>Sister Moonshine
</a></li>
Sé que es un ejemplo muy trillado, pero bueno, espero que a alguien le sirva.
Saludos!!