2

我有这个标记：

<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 更优雅的解决方案？

4

2 回答 2

4

信不信由你，您只需要1px在父容器的顶部添加一个填充。slideToggle问题是，在第一个div的末尾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 }
于 2010-02-17T20:13:29.167 回答
3

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

{ position:relative; top:10px; }

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

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

于 2010-02-17T19:50:47.357 回答