slideDown在结束时突然跳跃 [英] slideDown jumps abruptly at the end

问题描述

我在垂直列（嵌套的UL）中使用 slideToggle 构建了一个相当普通的菜单子菜单布局，以展开和折叠子菜单。

我想解决的问题是子菜单跳在最后打开的方式。 （我在最新版本的Chrome中测试。）在第二个子菜单Benefits中最可能是最明显的。

我认为问题可能与有关， ：仅当菜单完全展开后才添加样式。具体来说，当菜单完全展开后， current 类会被添加到LI标签。但是注释掉切换该类的代码似乎没有效果。

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

JS：

  $（document）.ready（function（）{
 $（'＃group-subnav> ul> li> a' ，function（e）{
 e.preventDefault（）; 
 var $ li = $（this）.closest（'li'）; 
 $ li.find（'ul'）。 slideToggle（''，function（）{
 $ li.toggleClass（'current'）
}）end（）。siblings（）。find（'ul'）。 （）{
 $ li.siblings（）。removeClass（'current'）
}）end（）; 
}）; 
}）; 
 
 
 
 
 解决方案

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

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

这允许jQuery精确计算结束高度。

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

I've built a fairly normal menu-submenu arrangement in a vertical column -- nested ULs, using slideToggle to expand and collapse submenus.

The problem I'm trying to solve is in the way the submenus "jump" open at the very end. (I'm testing in the latest release of Chrome.) It's probably most noticable in the second submenu, "Benefits". It doesn't jump when menus are collapsing, only when they're expanding.

I thought that the problem might have something to do with the :after styles being added only when the menu is fully expanded. Specifically, the class current is added to the LI tag once the menu is fully expanded. But commenting out the code that toggles that 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();
    });
});​

The CSS is considerable, and the HTML unremarkable.

解决方案

Give the element you are slidetoggling a set 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 end height.

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

这篇关于slideDown在结束时突然跳跃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！