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

Question

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

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

Answer 1

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