slideDown最后突然跳了起来

时间:2012-06-25 17:38:11

标签: javascript jquery css html5

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

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

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

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相当可观,HTML也不起眼。

9 个答案:

答案 0 :(得分:15)

给你正在滑动的元素设置一个宽度。

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

答案 1 :(得分:8)

我有同样的问题,但没有任何效果。事实证明将“transition”属性设置为导致我的问题:P我只是在滑动对象上将其设置为none,而slideDown现在可用作魅力: - )

答案 2 :(得分:5)

对我来说问题是我有CSS填充。删除了填充并将其转移到另一个封装我原始标记的html标记中,一切正常。

答案 3 :(得分:4)

我知道这是一个老问题,但也许我的解决方案可以帮助其他一些google。

对我来说,问题是由填充和框大小调整引起的:边框 我不需要特定的高度或宽度(尝试两者,最后将它们移除),盒子尺寸确实可行。

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

这个剪辑为我的滚动框工作。 请注意,box-sizing:没有填充的border-box没有引起任何问题。

JQuery版本是1.7.1

答案 4 :(得分:1)

2020年答案

在带有slideDown()的元素正下方添加此虚拟div标签

<div style="overflow: hidden;"></div>

我只是不小心弄清楚了这个窍门,它对我非常有用。

答案 5 :(得分:0)

我有这个问题。我的问题是因为我正在将CSS中的display属性更改为'grid'。幻灯片功能将显示设置为阻止,因此存在冲突,导致跳转解决方案。

我通过用另一个div包装子节点来代替显示为网格来解决这个问题。

答案 6 :(得分:0)

正如@Rick在其answer中所说,css Myoglobin P 6 123 Myoglobin P 32 2 1 124 Endolysin P 32 2 1 125 Endolysin H 3 2 126 属性会干扰jQuery transitionslideDown()方法。

当然,您可以仅从元素的CSS中删除slideUp()属性,但是对于其他自定义动画,您仍然可能需要过渡。

这是一个简单的解决方法:

transition

答案 7 :(得分:0)

请确保您尝试使用slideToggle的元素没有任何样式,因为jQuery会在动画过程中添加它。我的问题是我设置了填充并删除了此问题。

答案 8 :(得分:0)

在我的情况下,使用“!important”属性填充顶部和底部设置,删除“!important”使动画再次平滑。