slideDown salta abruptamente al final

He construido una disposición de menú-submenú bastante normal en una columna vertical - UL anidados, usando slideToggle para expandir y colapsar submenús.slideDown salta abruptamente al final

El problema que estoy tratando de resolver está en la forma en que los submenús "saltan" al final. (Estoy probando en la última versión de Chrome). Probablemente sea más notorio en el segundo submenú, "Beneficios". No salta cuando los menús se colapsan, solo cuando se están expandiendo.

Pensé que el problema podría tener algo que ver con los estilos :after que se agregan solo cuando el menú está completamente expandido. Específicamente, la clase current se agrega a la etiqueta LI una vez que el menú está completamente expandido. Pero comentar el código que alterna esa clase parece no tener ningún efecto.

http://jsfiddle.net/mblase75/5gGum/

JS:

$(document).ready(function() { 
    $('#group-subnav > ul > li > a').on('click', function(e) { 
     e.preventDefault(); 
     var $li = $(this).closest('li'); 
     $li.find('ul').slideToggle('', function() { 
      $li.toggleClass('current') 
     }).end().siblings().find('ul').slideUp('', function() { 
      $li.siblings().removeClass('current') 
     }).end(); 
    }); 
});

El CSS es considerable, y el código HTML sin complicaciones.

Fuente

2012-06-25 Blazemonger

Dale al elemento que estás deslizando un ancho determinado.

http://jsfiddle.net/5gGum/6/

#group-subnav > ul > li > ul { 
     display: none; 
     background: #f4e693; 
     padding: 2em 0; 
     width: 159px; 
    }

Esto permite jQuery para calcular con precisión la altura final.

Como referencia, he aprendido acerca de este pequeño truco de aquí: http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

Fuente

2012-06-25 17:48:06

Bueno, puedo decir honestamente que nunca lo hubiera pensado. ¡Muchas gracias! – Blazemonger

+1, estoy de acuerdo con esta respuesta. Además, he descubierto que si puedes hacer que tu elemento sea 'flotado ', eso también lo resuelve. – Sparky

@ Sparky672 Si lo haces flotar, el elemento tendrá el ancho de sus niños internos. Si los niños internos no tienen un ancho establecido, ¿no tendrías el mismo problema? http://jsfiddle.net/5gGum/17/ –

he tenido el mismo problema, pero nada funcionó. Resulta que tener la propiedad de "transición" establecida en algo provocó mis problemas: P Simplemente lo configuré en ninguno en el objeto deslizante y slideDown ahora funciona como un encanto :-)

Fuente

2015-03-27 12:56:08 Rick

mejor respuesta !!!!! –

Para mí, el problema era que tenía relleno de CSS. Se eliminó el relleno y se lo transfirió a otra etiqueta html que encapsulaba mi etiqueta original y todo funcionó.

Fuente

2015-07-14 12:23:28 Ogglas

Sé que esta es una vieja pregunta, pero tal vez mi solución ayude a otros googlers.

Para mí, el problema fue causado por tener un relleno y un tamaño de caja: cuadro de borde.
No necesité una altura o un ancho específico (probé ambos, y los quité al final), el tamaño de la caja fue el truco.

box-sizing:content-box; 
padding: 20px;

Este recorte funcionó para mí para mi cuadro de desplazamiento. Observe que el tamaño de la caja: border-box sin relleno no causaba ningún problema.

La versión de JQuery es 1.7.1

Fuente

2015-09-24 19:07:30 destiny

slideDown salta abruptamente al final

Respuesta

Cuestiones relacionadas