英文:
Stop padding change during jquery slideToggle
问题
在调用 jQuery slideToggle 时，有没有一种方法可以阻止文本在隐藏 <div> 时向上移动，并在显示时向下移动...
一种解决方法似乎是将带有填充的 <div> 嵌套在另一个 <div> 中，并在外部 <div> 上执行滑动。但如果不需要嵌套它们，那将会更方便一些。
如果您有任何其他疑问或需要进一步的帮助，请随时告诉我。
英文:
Is there a way to stop the text from moving during a call to jQuery slideToggle?
In the following example, the text moves up while the <div> is being hidden, and moves down while it is becoming visible...
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("a").on("click", function(e) {
e.preventDefault();
$("#outer").slideToggle(1000);
});
<!-- language: lang-css -->
#outer {
padding:10px;
border:1px solid #aaa;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
One solution appears to be to nest the <div> with padding within another <div> and doing the slide on the outer <div>. But it would make my life a little easier if I could make it work without needing to nest them.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("a").on("click", function(e) {
e.preventDefault();
$("#outer").slideToggle(1000);
});
<!-- language: lang-css -->
#outer {
border:1px solid #aaa;
}
#outer > div {
padding:10px;
}
<!-- language: lang-html -->
<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"><div>Some text<br/>Some text<br/>Some text<br/>Some text<br/>Some text</div></div>
<!-- end snippet -->
答案1
得分: 1
这是因为（根据这个答案），height 和 padding 都会影响 div 的总高度，jQuery 知道这一点，所以在动画中同时将顶部和底部的 padding 缩小到0，就像 height 一样。因为外部 div 的 padding 减小，所以会出现其内容向上移动的效果。
一个绕过这个问题的方法是在你的CSS中给 padding 属性添加 !important，以覆盖jQuery的padding动画效果。但要注意，由于 div 的总高度等于 padding + height，这意味着外部 div 不会减小到真正的高度为0，而只会减小到最小值为20px（顶部和底部padding），然后被jQuery移除。
另一个解决方法是按照你已经找到的方法，将内容包装在一个具有padding的内部div中。这样，外部div上将没有动画效果的padding，效果将如预期显示。
英文:
This is because (as per this answer), both height and padding contribute to the overall height of the div, and jQuery knows this so is animating the top and bottom padding towards 0 at the same time as the height. Because the outer div's padding is decreasing you get the effect of its content shifting upwards.
One way to circumvent this would be to override jQuery's padding shift by putting an !important on the padding property in your CSS. However note that, because the total height of the div is equal to padding + height, this means the outer div will not decrease to a true height of 0, but will only decrease to a minimum of 20px (top + bottom padding) before being removed by jQuery.
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
$("a").on("click", function(e) {
e.preventDefault();
$("#outer").slideToggle(1000);
});
<!-- language: lang-css -->
#outer {
padding:10px!important;
border:1px solid #aaa;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
Another workaround is to do exactly what you've already found and wrap the content with an inner div that has padding. This way there will be no animated padding on the outer div and the effect will display as intended.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论