jQuery slideToggle 跳来跳去
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/166299/
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
jQuery slideToggle jumps around
提问by Darren Oster
I'm using the jQuery slideToggle function on a site to reveal 'more information' about something. When I trigger the slide, the content is gradually revealed, but is located to the right by about 100 pixels until the end of the animation when it suddenly jumps to the correct position. Going the other way, the content jumps right by the same amount just before it starts its 'hide' animation, then is gradually hidden.
我在网站上使用 jQuery slideToggle 函数来显示有关某事的“更多信息”。当我触发幻灯片时，内容逐渐显露出来，但它位于右侧约100像素，直到动画结束时突然跳转到正确位置。反过来说，内容在开始“隐藏”动画之前会以相同的量跳动，然后逐渐隐藏。
Occurs on IE7/8, FF, Chrome.
发生在 IE7/8、FF、Chrome 上。
Any ideas on how I would fix this?
关于我如何解决这个问题的任何想法？
Thanks in advance.
提前致谢。
回答by Darren Oster
I have found a workaround, but I'm still not sure of the details. It seemed that when the 'overflow: hidden' style was added by jQuery, the effect that a nearby floated element had changed. The workaround was to place a permanent 'overflow: hidden' on the slideToggle'd div, and also a negative margin-left to counterbalance the effect.
我找到了一个解决方法，但我仍然不确定细节。似乎当 jQuery 添加了 'overflow: hidden' 样式时，附近浮动元素的效果发生了变化。解决方法是在 slideToggle 的 div 上放置一个永久的“溢出：隐藏”，还有一个负边距左以抵消效果。
I am surprised that changing the overflow value has such an effect on layout, but there you have it...
我很惊讶改变溢出值对布局有这样的影响，但是你有它......
回答by Jay Corbett
This is just a shot in the dark, but if the function is manipulating the height css property of your element(s), according to this siteyou have to separate the padding and display:none in your css to keep it from jumping
这只是在黑暗中的一个镜头，但是如果该函数正在操纵元素的高度 css 属性，则根据此站点，您必须将 css 中的 padding 和 display:none 分开以防止其跳跃
回答by Ben
Solved by adding to the toggled div:
通过添加到切换的 div 来解决：
overflow: hidden; position: relative;
回答by DanielBlazquez
回答by matdumsa
Does your document contains any DOCTYPE declaration? Without it, some browser render the page in "quirck" mode which doesn't always lead to the result you are expecting..
您的文档是否包含任何 DOCTYPE 声明？没有它，某些浏览器会以“古怪”模式呈现页面，这并不总是会导致您期望的结果。
see here
看这里
To make sure your page render as intended, add the following declaration to the top of the page (that is, before the html tag).
为确保您的页面按预期呈现，请将以下声明添加到页面顶部（即 html 标记之前）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
回答by MJohnson
I had the same problem with the .slideToggle, and BenAdler is right. Put everything you want to toggle in a div, and set the style for the div to something that contains overflow:hiddenand position: relative. It will work fine after that.
我遇到了同样的问题.slideToggle，BenAdler 是对的。将您想要切换的所有内容放在 div 中，并将 div 的样式设置为包含overflow:hidden和 的内容position: relative。之后它会正常工作。
回答by Sparky
I had this exact same problem but only when the hidden element was a <div>. I tried everything on this page but the only thing that worked was using overflow:hidden;.
我有这个完全相同的问题，但只有当隐藏元素是<div>. 我尝试了此页面上的所有内容，但唯一有效的是使用overflow:hidden;.
But the problem with using overflow:hidden;is that the upper & lower spacing created by the paragraph element was suddenly removed thereby making the layout ugly.
但是使用的问题overflow:hidden;是段落元素创建的上下间距突然被删除，从而使布局变得丑陋。
I changed my hidden element from a <div>to a <p>and removed the overflow:hidden;... it worked without messing up the layout and the jumping problem did not return.
我将我的隐藏元素从 a 更改<div>为 a<p>并删除了overflow:hidden;......它在没有弄乱布局的情况下工作，并且跳跃问题没有出现。
EDIT:
编辑：
On a new site I was determined to use a hidden <div>and I discovered some things about this issue...
在一个新网站上，我决定使用隐藏的<div>，我发现了一些关于这个问题的事情......
1) When divcontains por ulor similar the jumping occurs.
1) 当div包含p或ul类似的时候发生跳跃。
2) When the divonly contains text, alinks and/or images, no jumping animation.
2) 当div只包含文字、a链接和/或图片时，没有跳跃动画。
3) Removing all margins & padding from the elements within the hidden divclears up the issue. Other things like line-breaks can be added to compensate for the lack of padding & margins... not ideal but the animation is smooth again.
3) 从隐藏元素中移除所有边距和填充div可以解决问题。可以添加其他诸如换行符之类的东西来弥补填充和边距的不足……不理想但动画再次流畅。
回答by Francisco Javier Arenas Ulloa
you can use a structure like this one:
你可以使用这样的结构：
<div class="details">
<div class="hidden"> [your toggled info] </div>
</div>
and in your css
在你的 css 中
.details{
position:relative;
}
.hidden{
display:none;
}
i think thats it.
我想就是这样。
your jquery call must be:
您的 jquery 调用必须是：
$('.hidden').slideToggle("slow");
回答by acSlater
Just to share a solution that worked for me.
只是分享一个对我有用的解决方案。
I am using a responsive layout for a site I am working on and essentially using slidetoggle on one of my columns in my layout, the only solution that worked above was setting a fixed width to my content - however as the column widths are dynamic this is not a solution for me.
我正在为我正在处理的站点使用响应式布局，并且基本上在我的布局中的一列上使用了 Slidetoggle，上面唯一有效的解决方案是为我的内容设置固定宽度 - 但是由于列宽是动态的，这是不是我的解决方案。
Wrapping the content I wanted to toggle in an extra <div>and then using slide toggle on the new divseemed to do the trick. Try adding position:relativeto original element you were trying to slidetoggle.
包装我想在额外内容中切换的内容<div>，然后在新内容上使用滑动切换div似乎可以解决问题。尝试添加position:relative到您尝试滑动切换的原始元素。
Yes, this does add horrible unnecessary markup but it's the only way I could get it to work.
是的，这确实添加了可怕的不必要的标记，但这是我让它工作的唯一方法。
回答by acSlater
I've encountered the same error, solved it by positioning the element with
position: relative; width: 709px;The fixed width did the trick.
我遇到了同样的错误，通过使用position: relative; width: 709px;固定宽度定位元素解决了这个问题
。
