我有这个标记:
<div class="myToggledDiv">
<div>content</div>
</div>
<div style="margin-top: 10px;">
content
</div>
通过 jQuery，我正在执行 .slideToggle 来显示/隐藏顶部 div。
我希望两个 div 之间始终保持 10px 的空间，无论是折叠还是展开。
然而，行为是当顶部 div 向下滑动时，10px 边距仍然存在，但一旦顶部 div 完成向下滑动，10px 边距就会消失。这似乎是利润崩溃问题。
我想出的解决方案是这样的:
<div class="myToggledDiv">
<div>content</div>
</div>
<div style="font-size: 1px"> </div>
<div style="margin-top: 10px;">
content
</div>
是关键，因为 div 中需要有内容来“分隔”两者并保留 10px 的边距。
我也尝试了 .clearfix:after 方法，但这在这种情况下不起作用，所以也许这是一个以 jQuery 为中心的问题。有没有人遇到过这个问题并找到了比额外的 div 更优雅的解决方案？
最佳答案
不管你信不信，你只需要在父容器的顶部添加一个 1px 内边距即可。问题是，在 slideToggle 末尾，第一个 div 设置为 display:none ，这会导致第二个 div 轻拍到 parent 。现在，这只是一个 CSS bug。如果父项上没有设置 padding，则子项的边距将移至父项的外部，并将两个项向下推。通过向父元素应用 1px 边距，可以强制 边距 保留在元素内部:
<body style="padding-top: 1px">
<div class="myToggledDiv">
<div>content</div>
</div>
<div style="margin-top: 10px;">
content
</div>
</body>
显然，您希望删除所有这些内联样式并根据需要使用单独的样式表和 id/类。
如果您需要抵消额外的填充(取决于您的布局)，您可能可以使用此:
{ margin-top: -1px; padding-top: 1px }
关于jQuery、切换 div、CSS 间距问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2283538/