Question

我有这个标记：

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

＆amp; nbsp;是关键，因为需要在div中内容来“分离”两者并保留10px的保证金。

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

Answer 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 / classes。

如果你需要抵消额外的填充（取决于你的布局），你可能只能使用它：

{ margin-top: -1px; padding-top: 1px }

Answer 2

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

{ position:relative; top:10px; }

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

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

jQuery，切换div，CSS间距问题

2 个答案: