javascript - Jquery slideToggle,仍然没有简单的非跳动解决方案?

标签 javascript jquery html css

直到今天,当我在 jQuery 中遇到 slideDown 跳动错误时,我仍然感到惊讶。已经阅读了很多关于它的文章,关于 jQuery for designers 的文章等等。仍然无法理解它。

如果不存储高度等,是否仍然没有简单的方法可以解决这个问题?还有其他方法可以达到相同的结果吗?

为我的相关代码制作了一个基本示例,但我想它与任何其他错误案例一样。

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

最佳答案

实际上,slidetoggle 中没有您所说的错误,

问题在于浏览器如何处理像 p 这样的标签的默认 paddingmargin,如果它们不可见默认不添加paddingmargin

但是一旦它们变得可见,它们就会被添加到布局中,即您提到的这种跳跃的原因。

这是我为忽略这些实现错误所做的事情:

.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/

关于javascript - Jquery slideToggle,仍然没有简单的非跳动解决方案?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16981536/

相关文章:

javascript - 如何让外部 .JS 文件在 joomla 中工作

javascript - 如何在JavaScript中播放与视频不同的音频?

javascript - 使用 jQuery 悬停时出现重复图像

html - Rails 在 <%= 插入之前忽略空格

javascript - 将当前变量与前一个变量相加

javascript - Backbone JS : where to declare the function inside a view?

javascript - 如何检查复选框是否被选中?

javascript - <选项> Mobile Safari 中的事件 <选择> 列表>

javascript - Node.js 和 ExpressJS body-parser 包检索数据

javascript - 如何使用 javascript 自动提交表单(onevent)?