Código HTML del menú
<div id="DivMenu" class="Menu"> <ul class="navegador"> <li><a class="desplegable flechaDown" href="#" id="a0"><span>Menú General</span></a> <ul style="display: none;" class="submenu-a0"> <li><a class="nodesplegable" href="http://www.example.com/" id="a00"><span>Datos Personales</span></a></li> </ul> </li> <li><a class="desplegable flechaDown" href="#" id="a1"><span>Expediente Profesional</span></a> <ul style="display: none;" class="submenu-a1"> <li><a class="nodesplegable" href="http://www.example.com/" id="a10"><span>Expediente</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a11"><span>Certificados</span></a></li> </ul> </li> <li><a class="desplegable flechaDown" href="#" id="a2"><span>Gestión Académica</span></a> <ul style="display: none;" class="submenu-a2"> <li><a class="nodesplegable" href="http://www.example.com/" id="a20"><span>Informe Act. Docente</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a21"><span>Tutorías</span></a></li> <li><a class="desplegable flechaDown" href="#" id="a22"><span>Primer y Segundo Ciclo</span></a> <ul style="display: none;" class="submenu-a22"> <li><a class="nodesplegable" href="http://www.example.com/" id="a220"><span>Lista Alumnos</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a221"><span>Carrusel Fotos</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a222"><span>Fichas Alumnos</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a223"><span>Calificar</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a224"><span>Datos ECTS</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a225"><span>Guía Docente</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a226"><span>Horario Asignatura</span></a></li> <li><a class="desplegable flechaDown" href="#" id="a227"><span>Horarios Profesor</span></a> <ul style="display: none;" class="submenu-a227"> <li><a class="nodesplegable" href="http://www.example.com/" id="a2270"><span>Calendario Exámenes</span></a></li> <li><a class="nodesplegable" href="http://www.example.com/" id="a2271"><span>Horario Profesor</span></a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
Código JS
if (window.jQuery) { jQuery.fn.exists = function () { return this.length > 0; } $(document).ready(function () { $(".navegador ul").hide(); $("a.desplegable").toggle( function () { //$(this).removeClass('flechaDown'); $(this).addClass('flechaUp'); $(this).removeClass('flechaDown').addClass('flechaUp'); $(this).parent().find("ul.submenu-" + $(this).attr('id')).slideDown('fast'); }, function () { $(this).removeClass('flechaUp').addClass('flechaDown'); $(this).parent().find("ul.submenu-" + $(this).attr('id')).slideUp('fast'); } ); }); }