Question

我在垂直列中构建了一个相当普通的菜单子菜单排列 - 嵌套的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();
    });
});

CSS相当可观，HTML也不起眼。

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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

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

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

JQuery版本是1.7.1

Answer 5

2020年答案

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

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

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

Answer 6

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

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

Answer 7

正如@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 transition和slideDown()方法。

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

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

transition

Answer 8

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

Answer 9

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

slideDown最后突然跳了起来

9 个答案:

2020年答案