在调用jQuery slideToggle时，是否有办法阻止文本移动？
在下面的示例中，当<div>隐藏时文本向上移动，当<div>可见时文本向下移动...
$("a").on("click", function(e) {
e.preventDefault();
$("#outer").slideToggle(1000);
});#outer {
padding:10px;
border:1px solid #aaa;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><a href="#">Show/Hide</a></p>
<div id="outer">Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text</div>一个解决方案似乎是将带有填充的<div>嵌套在另一个<div>中，并在外部<div>上滑动，但如果我可以使其工作而不需要嵌套它们，这将使我的工作更容易一些。
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个
1条答案
按热度按时间uemypmqf1#
这是因为（根据this answer），
height* 和 *padding都对div的整体高度有影响，jQuery知道这一点，所以在height的同时将顶部和底部的padding动画化为0。避免这种情况的一种方法是通过在CSS的
padding属性中放置一个!important来覆盖jQuery的填充移位。但是请注意，因为div的总高度等于padding+height，这意味着外部div不会减小到真正的高度0。但在被jQuery删除之前，只会减少到最小20px（顶部+底部填充）。另一种解决方法是完全按照你已经找到的方法，用一个有填充的内部div来 Package 内容。这样外部div上就不会有动画填充，效果也会按预期显示。