SlideDown jumps sharply at the end

Question

I built a pretty normal submenu menu in a vertical column - nested UL, using slideToggle to expand and collapse the submenu.

The problem I'm trying to solve is that the jump menu opens at the very end. (I am testing the latest version of Chrome.) This is probably most notable in the second “Benefits” submenu. It does not jump when the menu collapses, only when they expand.

I thought the problem might have something to do with :after styles, added only when the menu is fully expanded. In particular, the current class is added to the LI tag after the menu extends completely. But commenting on the code that toggles this class seems to have no effect.

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 is significant and HTML is not significant.

Answer 1

Give the element you slidetoggling the given width.

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

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

This allows jQuery to accurately calculate the height of the end.

For reference, I found out about this little trick from here: http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

Answer 2

For me, the problem was that I had CSS addition. They removed the registration and moved it to another html tag, encapsulating my original tag, and everything worked.

Answer 3

I had the same problem but nothing worked. It turns out that the “transition” property set for something caused my problems: P I just didn’t set it for anyone on a sliding object, and slideDown now works like a charm :-)

Answer 4

I know this is an old question, but maybe my solution helps other seekers.

For me, the problem was caused by the presence of a capital and dimensional frame: border-box.
I don't need a specific height or width (both tried and they were removed at the end), the box size did the trick.

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

It cut me off for my scrolling. Please note that the window size: the frame without padding does not cause any problems.

JQuery Version - 1.7.1