He hecho un ejemplo de menú para que al clicar en el menú se despliegue un submenú, y al volver a clicar se pliegue. El problema es que al clicar en el submenú también se pliega, y no entiendo por qué lo hace.
Código HTML :
<nav id="mainNav"> <ul> <li><a href="#">lorem ipsum</a> <ul> <li><a href="#">dolor sit amet</a></li> <li><a href="#">dolor sit amet</a></li> <li><a href="#">dolor sit amet</a></li> </ul> </li> <li><a href="#">lorem ipsum</a> <ul> <li><a href="#">dolor sit amet</a></li> <li><a href="#">dolor sit amet</a></li> <li><a href="#">dolor sit amet</a></li> </ul> </li> <li><a href="#">lorem ipsum</a></li> <li><a href="#">lorem ipsum</a></li> </ul> </nav>
Código CSS :
<style>
nav#mainNav > ul > li {
margin: 3px;
background-color: #ddd;
}
nav#mainNav ul ul li {
margin: 1px;
background-color: #bbb;
}
</style>Código Javascript :
<script>
$("nav#mainNav > ul > li").click(function() {
$(this).find("ul").slideToggle();
});
</script> 