Buenas tardes, estoy desarrollando un menú vertical desplegable, utilizando para ello JQuery. Lo tengo todo listo y funcionando lo que quiero dejarlo bonito.
Por ahora, el menú se despliega y cambia la clase al atributo para saber cual es el elemento activo en ese momento, lo que necesito es que la clase sólo se la cambie a la lista padre y no al submenú, es decir que la clase ".aside_active" sólo se le ponga a los elementos a del primer ul y no a los demás.
HTML
Código:
<ul class="aside_navigation">
<li>
<a href="" class="aside_active aside_down">Home</a>
<ul class="aside_dropdown">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
</ul>
</li>
<li>
<a href="" class="aside_down">Noticias</a>
<ul class="aside_dropdown">
<li><a href="">Sub1</a></li>
<li><a href="">Sub2</a></li>
<li><a href="">Sub3</a></li>
</ul>
</li>
<li><a href="">Editores</a></li>
<li><a href="">Configuración</a></li>
</ul>
JQUERY
Código:
$(document).ready(function(){
$(".aside_dropdown").hide();
$(".aside_navigation a").click(function(event){
$(this).next().slideToggle('fast');
$(".aside_navigation a").removeClass("aside_active");
$(this).addClass('aside_active');
event.preventDefault();
})
});
No se si me he explicado bien.
Un saludo y gracias.