如何避免佈局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。