jQuery，切换 div，CSS 间距问题答案

【问题标题】：jQuery, toggling div, CSS spacing issuejQuery，切换 div，CSS 间距问题
【发布时间】：2011-01-18 00:27:32
【问题描述】：

我有这个标记：

<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">&nbsp;</div>

<div style="margin-top: 10px;">
    content
</div>

是关键，因为 div 中需要有内容来“分离”两者并保留 10px 的边距。

我也尝试了 .clearfix:after 方法，但这在这种情况下不起作用，所以这可能是一个以 jQuery 为中心的问题。有没有人遇到过这个问题并找到了比额外的 div 更优雅的解决方案？

【问题讨论】：

标签： jquery margin slidetoggle

【解决方案1】：

信不信由你，您只需在父容器顶部添加一个1px 填充。问题是，在slideToggle 的末尾，第一个div 设置为display:none，这会导致第二个div 对父级进行轻拍。现在，它只是一个 CSS 错误。如果父项上没有设置padding，则子项的边距将移到父项的外部，并将两个项向下推。通过对父元素应用1px 边距，可以强制margin 留在元素内：

<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 }

【讨论】：

【解决方案2】：

有点奇怪的解决方法，但您可以为第二个 div 设置以下规则：

{ position:relative; top:10px; }

在线演示：http://jsbin.com/enala/edit

我也鼓励您考虑Doug's Answer。如果在父容器上设置填充会产生不希望的结果，您可以使用此解决方案作为替代方案。

【讨论】：

是的，这也有效。我喜欢 CSS 有多种解决问题的方法！