如何避免使用JQuery的toggle()方法对布局div造成影响？

Question

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

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

- ipso facto

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即可。

- Sampson

---

@dalbaeb - 你所说的“语义友好”是什么意思？我知道这个词汇的含义，但在这个上下文中是指什么？ - karim79

Answer 2

尝试编写一个新的函数，使用visibility: hidden而不是display: none。这样可以保持CSS盒子（和布局）而无需显示div。

- Stefan Mai

---

我最初也是这么想的。但是如果他想看到div动画关闭/打开-那会引起一些问题。 - Sampson

Answer 3

Jonathan Sampson的回答是可行的 - 或者如果不知道你具体在做什么（标记和所需的效果），我会使用绝对定位和高z-index，将其从文档流中取出。这通常是模态窗口/灯箱使用的方法。这里有一个tutorial。

- FlemishBeeCycle