jquery - 如何避免布局 div 上的 JQuery toggle() 导致布局移动？

Question

我有一个 JQuery 函数，可以切换布局中的一个 div。问题是当 div 出现或消失时，整个布局在屏幕上移动。有没有办法在不改变布局的情况下实现相同的显示/隐藏效果？

<script>
  $(document).ready(function(){
    $("button").click(function () {
      $("#layoutDiv").toggle();
    });
  });
</script>

score 9 · Accepted Answer

您可以将该 div 包装在另一个保持适当宽度/高度的 div 中以保持布局一致。

<div style="width:300px;height:200px">
  <div class="animateMe">
    <p>When I close, the outer div will still be there.</p>
  </div>
</div>

如果您事先不知道高度/宽度，则可以在页面加载时使用 javascript 以编程方式设置它。只需获取可折叠 div 的 .width() 和 .height() 值并将它们应用于外部 div 的 css。

score 4 · Accepted Answer

尝试编写一个使用可见性的新函数：隐藏而不是显示：无。这将保持 CSS 框（和布局）而不显示 div。

score 0 · Accepted Answer

乔纳森桑普森的回答会起作用——或者在不知道你到底在做什么（标记和所需的效果）的情况下，我会使用具有高 z-index 的绝对定位，这将使它脱离文档流。这是模态窗口/灯箱通常使用的。这是一个教程。

3 回答 3