Tengo un menú acordeón, pero no sé como cerrarlo, siempre queda abierto, este es el código:
$(document).ready(function () {
$('#nav > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul id="nav">
<li style="background:url(http://lineadetiempoups.ec/img/bgmenudeplegable.png) center top no-repeat; padding:10px;"><a href="lineatiempo.html">Linea de Tiempo</a></li>
<li ><a href="#"><img src="http://lineadetiempoups.ec/img/linea_fecha.png" width="76" height="34" alt=""/></a>
<ul style="margin-top:12px;">
<!-- <li><a href="#">Sub-Item 1 a</a></li>
<li><a href="#">Sub-Item 1 b</a></li>
<li><a href="#">Sub-Item 1 c</a></li>-->
<li style="background:none;padding-left:30px;padding-right:30px;"><a href="galerias.html">Imágenes</a></li>
<li style="background:none;padding-left:30px;padding-right:30px;"><a href="videos.html">Videos</a></li>
<li style="background:none;padding-left:30px;padding-right:30px;"><a href="libro.html">Libro</a></li>
</ul>
</li>
</ul>