Ejemplo de menú desplegable con JQuery.

[Sonickles]

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:

<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:

<ul class="item">
    <li><a class="opcion">Anathema</a>
        <ul class="subitem">
            <li><a>Alone</a></li>
            <li><a>Fragile Dreams</a></li>
            <li><a>A Simply Mistake</a></li>
        </ul>
    </li>
    <li><a class="opcion">Saturnus</a>
        <ul class="subitem">
            <li><a>Thou Art Free</a></li>
            <li><a>Starres</a></li>
            <li><a>The Fall of Nakkiel</a></li>
        </ul>
    </li>
    <li><a class="opcion">Supertramp</a>
        <ul class="subitem">
            <li><a>Sister Moonshine</a></li>
            <li><a>Logical Song</a></li>
            <li><a>Surely</a></li>
        </ul>
    </li>
</ul>
 

Sé que es un ejemplo muy trillado, pero bueno, espero que a alguien le sirva.
Saludos!!