Menú acordeón. Haciéndolo simple con jQuery – coche

jQuery es una biblioteca JavaScript que ya casi se está convirtiendo en un estándar. Nacida en 2006, parece que actualmente es con diferenciala más usada y su principal ventaja es que nos hace más simples la manera de manejar los documentos HTML y la manipulación delDOM, permitiéndonos modificar el contenido de una página sin que sea siquiera necesario recargarla.

Lo que veremos hoy se aprovecha de todo esto para transformar un simple par de listas anidadas en un menú tipo "acordeón", esos en los que se despliegan las sub-opciones al tiempo que se pliegan las que pudieran estar previamente abiertas. Lo podéis ver funcionando al final de esta misma entrada o eneste Codepen.

Todo esto que viene a continuación lo he puesto por separado para poder ir explicándolo un poco, pero se puede copiar y pegar dentro de un gadget, un trozo tras otro -en el mismo orden en que se presentan- y funcionará sin problemas.

HTML

La lista se construye con normalidad con la etiquetaul y sucesivosli. Todo lo meteremos dentro de una caja con una clase que he llamadomenujq para poder manejar el estilo de esta lista de manera independiente a otras listas comunes que pudieran existir en la misma página.

Para las sub-opciones simplemente se anidará otra lista completa dentro de un elementoli, teniendo cuidado de cerrar ese elemento tras el cierre de la lista anidada (/ul).

Los enlaces que servirán para desplegar no pueden llevar a ningún sitio porque no cumplirían su función, así que se rellenan con unjavascript:void(); y listo.

div class="menujq"
ul
 lia href="javascript:void();"Opción1 desplegable/a
  ul
   lia href="URL del enlace"Opc. 1.1/a/li
   lia href="URL del enlace"Opc. 1.2/a/li
  /ul
 /li
 lia href="javascript:void();"Opción2 desplegable/a
  ul
   lia href="URL del enlace"Opc. 2.1/a/li
   lia href="URL del enlace"Opc. 2.2/a/li
   lia href="URL del enlace"Opc. 2.3/a/li
  /ul
 /li
 lia href="URL del enlace"Opción3 Directa/a/li
/ul
/div

CSS

La parte del estilo, además de servirnos para configurar los tamaños y para conseguir diferenciar con color la lista principal de las anidadas, también la hemos aprovechado para añadir unos simbolitos que diferencien si el elemento es desplegable o no. Detallado queda en los comentarios.

style
.menujq ul {
list-style: none;
width: 80%;
margin: 0 auto;
padding: 0;
}
.menujq a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
background: #D25400;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
}
/* Símbolo elemento normal */
.menujq ul li a:before {
content: "\25CF\00A0 ";
width: 28px;
display: inline-block;
vertical-align: top;
}
/* Símbolo elemento desplegable cerrado */
.menujq ul li.desplegable a:before {
content: "\25BA\00A0";
}
/* Símbolo elemento desplegable abierto */
.menujq ul li.desplegable.activa a:before {
content: "\25BC\00A0 ";
}
/* Eliminar símbolos para sub-opciones */
.menujq ul li.desplegable ul li a:before,
.menujq ul li.desplegable.activa ul li a:before {
content: "";
}
/* Lista anidada inicialmente oculta */
.menujq ul ul {
display: none;
width: 100%;
}
/* Sangrado y segundo color para sub-opciones */
.menujq ul ul a {
padding-left: 20px;
background: #E77E23;
text-transform: capitalize;
}
/style

JAVASCRIPT

Y por fin el alma de todo esto, el JavaScript hilvanado con jQuery.

Básicamente lo que hace, en este orden, es:

Buscar los elementos de lista, hijos directos de la clase menujq cuyo hijo sea una etiqueta de lista ul y añadirle una clase que he llamado desplegable. En otras palabras, localizar y marcar los elementos de lista que contienen una lista anidada dentro de ellos y que serán los únicos que se podrán desplegar.
Controlar el clic sobre cualquier enlace dentro de las listas
Guardar el objeto que sigue tras aquel sobre el que se ha hecho clic (comprobar)
Limpiar todas las clases activa que se hayan podido añadir en anteriores clics...
...y añadírsela al elemento li que contiene el enlace sobre el que se hecho clic ahora
Las dos últimas condiciones sirven para ver si una lista está plegada o desplegada (:visible) para añadirle el efecto de plegado (.slideUp) o desplegado (.slideDown).

script type="text/javascript"
$(document).ready(function(){
$('.menujq ul li:has(ul)').addClass('desplegable');
$('.menujq ul li a').click(function() {
var comprobar = $(this).next();
$('.menujq li').removeClass('activa');
$(this).closest('li').addClass('activa');
if((comprobar.is('ul')) && (comprobar.is(':visible'))) {
$(this).closest('li').removeClass('activa');
comprobar.slideUp('normal');
}
if((comprobar.is('ul')) && (!comprobar.is(':visible'))) {
$('.menujq ul ul:visible').slideUp('normal');
comprobar.slideDown('normal');
}
});
});
/script

Y así es como quedará todo junto:

Ah, y casi se me olvida por obvio. Si queremos que esto funcione tenemos que tener la librería jQuery en nuestra plantilla. Si no es así entonces delante de todo este código o en la plantilla -si es que pensamos usarla para otros asuntos futuros- antes del cierre/head tendremos que insertar esto:

script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"/script