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

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

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

Answer 3

乔纳森桑普森的答案将工作 - 或者不知道你在做什么（标记和所需的效果），我会使用绝对定位与高Z指数，这将使其脱离文档流。这是模式窗口/灯箱通常使用的模式。这是一个tutorial。