Tengo este código html. Es un menú hecho con listas.
Código:
<ul id="menu3" class="menu noaccordion"> <li class="sin_borde"> <a href="#" class="activado_princi">Documentación Accesorios</a> <ul> <li class="sin_borde"><a href="#">Estructura</a> <ul class="menu noaccordion"> <li><a href="nivel2">Estructura 1.1</a></li> <li><a href="nivel2">Estructura 1.2</a></li> <li><a href="nivel2">Estructura 1.3</a></li> </ul> </li> <li class="sin_borde"><a href="#">Estructura 2</a> <ul> <li><a href="nivel2">Estructura 2.1</a></li> <li><a href="nivel2">Estructura 2.2</a></li> <li><a href="nivel2">Estructura 2.3</a></li> </ul> </li> </ul> </li> </ul>
y luego tengo este código javascript:
Código:
Con este códigio lo que me hace es, expandir y recoger el menu. pero solo me hace en el de Documentación Accesorios y lo que quiero conseguir es que me haga lo mismo en Estructura y Estructura 2. function initMenus() { $('ul.menu ul').show(); $('ul.menu ul ul').hide(); $.each($('ul.menu'), function(){ $('#' + this.id + '.expandfirst ul:first').show(); }); $('ul.menu li a').click( function() { var checkElement = $(this).next(); var parent = this.parentNode.parentNode.id; if($('#' + parent).hasClass('noaccordion')) { $(this).next().slideToggle('normal'); return false; } if((checkElement.is('ul')) && (checkElement.is(':visible'))) { if($('#' + parent).hasClass('collapsible')) { $('#' + parent + ' ul:visible').slideUp('normal'); } return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#' + parent + ' ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenus();});
Gracias a todos de antemano y saludos