Jquery slideToggle，仍然没有简单的、不跳动的解决方案吗？

Question

每当我在jQuery中遇到slideDown跳动的错误时，我仍然感到惊讶。已经阅读了很多有关jQuery设计师等方面的文章，但仍无法理解。

还有没有不需要存储高度等信息来解决这个问题的简单方法？有没有其他方法可以实现相同的效果？

我制作了一个基本示例，但我想这与任何其他错误情况都相同。

http://jsbin.com/oyokoc/20/edit

- Xavio

Answer 1

您所说的 slidetoggle 没有实际上的错误，问题在于浏览器对象如 p 的默认 padding 和 margin 的处理方式，如果它们不可见，则不添加默认的 padding 和 margin，但是一旦它们变为可见状态，它们就会添加到布局中，这就是您提到的跳动的原因。

我为忽略这些实现错误做了一些工作：

.more{
 display: none;
 background: #eee;
 /* added to make the margin and padding instead of p */
 padding: 5px;
 margin-top: 5px;
}

/* removing the default margin and padding of p */
p{
 margin: 0px;
 padding :0px;
} 

这里是演示http://jsbin.com/udexix/1/

更新

如果您想使用多个p并且不想更改默认填充和边距，您可以将所有p的显示样式更改为inline-block

以下是相应的代码:

.more{
 display: none;
 background: #eee;
 /* no changes here */
}

/* changing the display property of p */
p{
 display: inline-block;
} 

这里是演示2 http://jsbin.com/udexix/8/

（此页面为技术演示，无需解释）

- Rohit Agrawal

---

但是，使用这种解决方案可能需要向隐藏内容添加另一个<p>，这样看起来不太好。 - Xavio

你能分享一下添加了p标签的HTML代码，让我们看看还能做些什么吗？ - Rohit Agrawal

好的，这与上面的代码相同，但在隐藏的 div 中有更多的 p 标签。http://jsbin.com/udexix/6/edit 将是您使用更多 p 标签的解决方案。 - Xavio