如何避免布局div上的JQuery切换()导致布局四处移动？

Question

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

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

Answer 1

您可以将该div包装在另一个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。

Answer 2

尝试编写一个使用visibility: hidden而不是display: none的新函数。这将保持CSS框(和布局)而不显示div。

Answer 3

Jonathan Sampson的答案将会起作用-或者，如果不知道您到底在做什么(标记和所需的效果)，我将使用具有高z索引的绝对定位，这将使其脱离文档流。这是模态窗口/ lightboxes通常使用的。这是一个tutorial。