如何避免布局div上的JQuery toggle（）导致布局四处移动？

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

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

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#layoutDiv”）.toggle（）；
});
});

您可以将该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。

尝试编写一个新函数，使用visibility:hidden而不是display:none。这将在不显示div的情况下维护CSS框（和布局）。

Jonathan Sampson的答案将起作用-或者，在不知道您具体在做什么（标记和所需效果）的情况下，我将使用带高z索引的绝对定位，这将使其脱离文档流。这是模态窗口/灯箱通常使用的。这是一个。

我最初也这么想。但是如果他想看到div动画关闭/打开，那会引起一些问题。@dalbaeb-你说的“语义友好”是什么意思？我是说，我知道这意味着什么，但在这种情况下？