slideDown最后突然跳了起来

Question

slideDown最后突然跳了起来

我在垂直列中构建了一个相当普通的菜单子菜单 - 嵌套的UL,slideToggle用于展开和折叠子菜单.

我试图解决的问题是子菜单在最后"跳"开的方式.(我正在测试最新版本的Chrome.)在第二个子菜单"好处"中,这可能是最值得注意的.当菜单折叠时,它不会跳转,只有当它们正在扩展时才会跳转.

我认为问题可能与:after仅在菜单完全展开时添加的样式有关.具体来说,current一旦菜单完全展开,该类就会添加到LI标签中.但是注释掉切换该类的代码似乎没有任何效果.

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

Run Code Online (Sandbox Code Playgroud)

CSS相当可观,HTML也不起眼.

Answer 1

use*_*654 15

为要滑动的元素提供设置的宽度.

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

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

Run Code Online (Sandbox Code Playgroud)

这允许jQuery准确计算结束高度.

作为参考,我从这里了解了这个小技巧:http://www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm

+1,我同意这个答案.另外,我发现如果你可以让你的元素成为一个"浮动",那也可以解决它. (5认同)
@ Sparky672如果你使它浮动,元素将具有它的内部子元素的宽度.如果内部儿童没有设定宽度,你会遇到同样的问题吗？http://jsfiddle.net/5gGum/17/ (4认同)
@ Sparky672也可能需要删除这些元素的边距.我最近发现边距正在从slideToggle上的元素中出现和消失,因为当元素完全可见时,其边距会在其前面的标题处折叠. (2认同)
似乎只有float才能让它对我有用,去掉了边距,填充,边距和周围元素的填充,给出了一个集合,%宽度 - 没有任何效果. (2认同)