javascript slideDown 最后突然跳转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11194402/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
slideDown jumps abruptly at the end
提问by Blazemonger
I've built a fairly normal menu-submenu arrangement in a vertical column -- nested ULs, using slideToggleto expand and collapse submenus.
我在垂直列中构建了一个相当正常的菜单-子菜单排列——嵌套的 UL，slideToggle用于展开和折叠子菜单。
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.
我试图解决的问题是子菜单在最后“跳转”的方式。（我正在最新版本的 Chrome 中进行测试。）在第二个子菜单“好处”中可能最引人注目。当菜单折叠时它不会跳转，只有在它们展开时才会跳转。
I thought that the problem might have something to do with the :afterstyles being added only when the menu is fully expanded. Specifically, the class currentis 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.
我认为问题可能与:after仅在菜单完全展开时添加的样式有关。具体来说，current一旦菜单完全展开，该类就会添加到 LI 标记中。但是注释掉切换该类的代码似乎没有任何效果。
http://jsfiddle.net/mblase75/5gGum/
http://jsfiddle.net/mblase75/5gGum/
JS:
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.
CSS相当可观，而HTML则不起眼。
回答by Kevin B
Give the element you are slidetoggling a set width.
给你正在滑动的元素设置一个宽度。
#group-subnav > ul > li > ul {
display: none;
background: #f4e693;
padding: 2em 0;
width: 159px;
}
This allows jQuery to accurately calculate the end height.
这允许 jQuery 准确计算结束高度。
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
作为参考，我从这里了解了这个小技巧：http: //www.bennadel.com/blog/2263-Use-jQuery-s-SlideDown-With-Fixed-Width-Elements-To-Prevent-Jumping.htm
回答by Rick
I had the same problem but nothing worked. Turns out having the "transition" property set to something caused my issues :P I just set it to none on the sliding object and slideDown now works as a charm :-)
我遇到了同样的问题，但没有任何效果。结果是将“transition”属性设置为某些东西导致了我的问题：PI 只是在滑动对象上将其设置为 none，而 slideDown 现在可以作为一个魅力:-)
回答by Ogglas
For me the problem was I had CSS padding. Removed the padding and transferred it to another html tag encapsulating my original tag and everything worked.
对我来说，问题是我有 CSS 填充。删除了填充并将其转移到另一个 html 标签，封装了我的原始标签，一切正常。
回答by destiny
I know this is an old question, but maybe my solution helps some other googlers.
我知道这是一个老问题，但也许我的解决方案可以帮助其他一些谷歌员工。
For me, the problem was caused by having a padding and a box-sizing : border-box.
I did not need a specific height or width (tried both, and removed them in the end), the box-sizing did the trick.
对我来说，问题是由填充和框大小引起的：边框框。
我不需要特定的高度或宽度（两者都试过，最后删除了它们），盒子大小就行了。
box-sizing:content-box;
padding: 20px;
This snipped worked for me for my scrolling box. Notice that box-sizing:border-box without a padding was not causing any problems.
这个剪辑对我的滚动框有用。请注意，没有填充的 box-sizing:border-box 不会导致任何问题。
JQuery version is 1.7.1
JQuery 版本是 1.7.1
回答by Will
I had this problem. My issue was because I was changing the display property in CSS to 'grid'. The slide functions set the display to block so there was a conflict which resulted in a jumpy solution.
我有这个问题。我的问题是因为我将 CSS 中的显示属性更改为“网格”。幻灯片功能将显示设置为阻止，因此存在冲突，导致解决方案不稳定。
I resolved this by wrapping the child nodes with another div to display as grid instead.
我通过用另一个 div 包装子节点以显示为网格来解决这个问题。
回答by Souleste
As @Ricksaid in their answerthe css transitionproperty interferes with jQuery slideDown()and slideUp()methods.
正如@Rick在他们的回答中所说，csstransition属性会干扰 jQueryslideDown()和slideUp()方法。
Of course you could just remove the transitionproperty from your element's css, however you might still need that transition for other custom animations.
当然，您可以transition从元素的 css 中删除该属性，但是您可能仍然需要其他自定义动画的过渡。
Here is a simple workaround:
这是一个简单的解决方法：
$('selector').css('transition', 'unset');
if ($('selector').is(':visible')) {
$('selector').slideUp();
} else {
$('selector').slideDown();
}
setTimeout(function() {
$('selector').css('transition', 'all 0.4s ease 0s');
}, 400);
回答by Nguyen You
2020 Answer
2020 答案
Add this dummy div tag right below the element with slideDown()
在元素正下方添加这个虚拟 div 标签 slideDown()
<div style="overflow: hidden;"></div>
I just accidentally figured out this trick and it worked for me perfectly.
我只是不小心想出了这个技巧，它对我来说非常有效。
