1

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>  

1 respuesta 1

0

Tienes un problema al hacer la animación le estas poniendo .slideToggle() el cual hace un efecto de abrir o cerrar dependiendo del caso que aplique.
Y como anteriormente tienes un slideUp() el slideToggle lo que hará es abrirlo nuevamente, entonces mi solución es que lo dejes en slideUp() y pongas un else y ahi pongas el slideToggle() o en otro caso el slideDown()

$(document).ready(function () {
  $('#nav > li > a').click(function(){
    if ($(this).attr('class') != 'active'){
      $('#nav li ul').slideUp();
      $(this).next().slideUp();
      $('#nav li a').removeClass('active');
      $(this).addClass('active');
    }else{
      $(this).next().slideToggle();
    }
  });
});
<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>

1
  • Muchas gracias, se ha solucionado todo.. Commented el 4 jul. 2016 a las 19:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.