Javascript 滑下在末端突然跳跃

我已经在一个垂直的列中构建了一个相当正常的菜单子菜单排列——嵌套的菜单，使用

slideToggle

来展开和折叠子菜单

我试图解决的问题是，子菜单在最后“跳转”打开的方式。（我正在测试最新版本的Chrome。）它可能在第二个子菜单“好处”中最引人注目。它不会在菜单折叠时跳转，只有在菜单扩展时才会跳转

我认为问题可能与

：只有在菜单完全展开时才添加
样式有关。具体来说，菜单完全展开后，类
current
将添加到LI标记中。但是注释掉切换该类的代码似乎没有效果


$（文档）.ready（函数（）{
$（“#group subnav>ul>li>a”）。在（'click'，函数（e）上{
e、 预防默认值（）；
var$li=$（this.closest（'li'）；
$li.find（'ul'）.slideToggle（''，function（）{
$li.toggleClass（'当前'）
}).end（）.sides（）.find（'ul'）.slideUp（''，function（）{
$li.sides（）.removeClass（'current'）
}).end（）；
});
});
/*标准化*/
正文，div，dl，dt，dd，ul，ol，li，h1，h2，h3，h4，h5，h6，pre，form，fieldset，input，textarea，p，blockquote，th，td{
保证金：0；
填充：0；
}
ol，ul{
列表样式：无；
}
#群子AV{
显示：表格单元格；
垂直对齐：顶部；
背景：#f6ca00；
宽度：159px；
身高：100%；
}
#亚AVA组{
显示：块；
颜色：继承；
文字装饰：无；
}
#a组：悬停{
/*文字装饰：下划线*/
}
#组subnav>ul{}
#组亚NAV>ul>li{
边框顶部：2个实心#fff；
字号：80%；
文本阴影：1px 1px 2px#eee；
颜色：#333；
字母间距：1px；
线高：1.2米；
背景：贝贝；
/*旧浏览器*/
}
#亚NAV>ul>li>a组{
填充：6px 8px 12px；
背景：贝贝；
/*旧浏览器*/
背景：-moz线性梯度（顶部，#bebebe 0%，#B3 50%，#8080 100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#BeBeBeBe）、颜色停止（50%，#B3）、颜色停止（100%，#808080））；
/*铬，Safari4+*/
背景：-webkit线性梯度（顶部，#bebebe 0%，#B3 50%，#8080 100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#bebebe 0%，#B3 50%，#8080 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（顶部，#BeBeBeBe 0%，#B3 50%，#8080 100%）；
/*IE10+*/
背景：线性梯度（顶部，#BeBeBeBe 0%，#B3 50%，#8080 100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#bebebe'，endColorstr='#808080'，GradientType=0）；
/*IE6-9*/
}
#亚NAV>ul>li>a组：之后{
内容：“+”；
浮动：对；
}
#组subnav>ul>li.current>a:after，
#组SUNBNAV>ul>li:悬停>a:之后{
字体大小：75%；
内容：'\25bc'；
}
#亚组AV>ul>li>ul{
显示：无；
背景#f4e693；
填充：2em 0；
}
#组子AV>ul>li.电流>ul
/*,
#组SUNBNAV>ul>li:悬停>ul*/
{
显示：块；
}
#亚NAV>ul>li>ul>li组{
文本阴影：无；
填充：5px 8px；
边框底部：1px实心#e5b502；
颜色：#666；
字体大小：90%；
字母间距：0；
}
#亚NAV>ul>li>ul>li组：第一个孩子{
边框顶部：1px实心#e5b502；
}
#亚NAV>ul>li>ul>li>a组{
颜色：继承；
文字装饰：无；
}
#亚NAV>ul>li>ul>li>a组：术后{
内容：“\00a0>”；
}
#组subnav>ul>li>ul>li>a:悬停{
文字装饰：下划线；
}


















更快的存储和检索
细致的记录管理
灾害预防和恢复
加强安全
释放物理空间
快速响应的客户服务




请致电我们的战略服务经理开始。





为正在滑动的元素指定一个设定的宽度


这使得jQuery能够准确地计算端点高度

作为参考，我从这里学到了这个小技巧：
我也有同样的问题，但没有任何效果。事实证明，将“transition”属性设置为某个属性导致了我的问题：P我只是在滑动对象上将其设置为“none”，而slideDown现在可以作为一种魅力：-）
对我来说，问题是我有CSS填充。删除了填充内容并将其转移到另一个html标记中，该标记封装了我的原始标记，所有内容都正常工作。
我知道这是一个老问题，但我的解决方案可能对其他谷歌用户有所帮助

对我来说，这个问题是因为有一个填充物和一个框大小：边框框。

我不需要特定的高度或宽度（两种方法都试过了，最后都去掉了），盒子的尺寸就可以了

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

这个剪子对我的滚动框很有用。
请注意，框大小：没有填充的边框框不会导致任何问题

JQuery版本是1.7.1
我遇到了这个问题。我的问题是因为我正在将CSS中的display属性更改为“grid”。幻灯片功能将显示设置为“阻止”，因此出现冲突，导致出现跳跃式解决方案

我通过用另一个div包装子节点以显示为网格来解决这个问题。
正如在他们的示例中所说的，css
transition
属性会干扰jQuery
slideDown（）
和
slideUp（）
方法

当然，您可以从元素的css中删除
transition
属性，但是对于其他自定义动画，您可能仍然需要该转换

以下是一个简单的解决方法：

$('selector').css('transition', 'unset'); 
if ($('selector').is(':visible')) {
    $('selector').slideUp();
} else {
    $('selector').slideDown();
}
setTimeout(function() {
    $('selector').css('transition', 'all 0.4s ease 0s');
}, 400);

2020答案
将此虚拟div标记添加到右侧
$('selector').css('transition', 'unset'); 
if ($('selector').is(':visible')) {
    $('selector').slideUp();
} else {
    $('selector').slideDown();
}
setTimeout(function() {
    $('selector').css('transition', 'all 0.4s ease 0s');
}, 400);

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