slideDown gwałtownie skacze pod koniec

Question

Zbudowałem dość normalny układ menu submenu w pionowych kolumnach - zagnieżdżonych UL, używając slideToggle do rozwijania i zwijania podmenu.

Problem, który próbuję rozwiązać, polega na sposobie otwierania podmenu "podskoku" na samym końcu. (Testuję w najnowszej wersji Chrome.) Prawdopodobnie jest to najbardziej zauważalne w drugim podmenu "Korzyści". Nie przeskakuje, gdy menu się zawala, tylko gdy się rozwijają.

Pomyślałem, że problem może mieć coś wspólnego ze stylami :after dodawanymi tylko wtedy, gdy menu jest w pełni rozwinięte. W szczególności klasa current jest dodawana do znacznika LI po pełnym rozwinięciu menu. Ale komentowanie kodu, który przełącza tę klasę, wydaje się nie mieć żadnego skutku.

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(); 
    }); 
});​ 

CSS jest znaczna, a nijaki HTML.

Answer 1

Podaj element, który przesuwasz, ustawiając ustawioną szerokość.

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

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

Pozwala jQuery dokładnie obliczyć wysokość końcowego.

Dla porównania, ja dowiedziałem się o tej małej sztuczki stąd: http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

Answer 2

miałem ten sam problem, ale nic nie działało. Okazuje się, że właściwość "przejścia" ustawiona na coś spowodowała moje problemy: P Po prostu nie ustawiam żadnego na przesuwającym się obiekcie, a slideDown działa teraz jak urok :-)

Answer 3

Dla mnie problemem było to, że miałem dopełnienie CSS. Usunięto dopełnienie i przeniesiono je do innego znacznika html zawierającego mój oryginalny tag i wszystko działało.

Answer 4

Wiem, że to stare pytanie, ale może moje rozwiązanie pomaga niektórym innym pracownikom google.

Dla mnie problem został spowodowany przez dopełnienie i rozmiar pudełka: border-box.
Nie potrzebowałem określonej wysokości ani szerokości (próbowałem obu, i usunąłem je na końcu), rozmiar pudełka zmienił się.

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

Ten snipped pracował dla mnie na moim polu przewijania. Zauważ, że box-sizing: border-box bez dopełnienia nie sprawiał żadnych problemów.

Wersja JQuery to 1.7.1