當切換時，間距減少

Question

有誰知道我怎樣才能停止切換效果引起額外的間距出現切換時？切換不允許我的內容間距保持不變。目前我切換，當內容沒有顯示時，間距減小，然後在切換內容顯示時增加。下面我添加了一個基本代碼。謝謝！！

<div class="button_border"><button onclick="myFunction()">Transcript</button></div> 
<div id="content"> 
</div> 


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

Answer 1

jQuery toggle（）方法通過將元素的display：屬性切換爲「none」來隱藏事物。根據CSS規範，該元素被刪除，其他元素重新流動以佔用其空間。

您想改爲使用CSS可見性：隱藏屬性。因此，它應該是這樣的：

<div class="button_border"><button onclick="myFunction()">Transcript</button></div> 
<div id="content"> 
</div> 


<script> 
$(document).ready(function() { 
    $("button").click(function(){ 
     if ($(this).css('visibility') == 'hidden') 
     $(this).css('visibility','visible'); 
     else 
     $(this).css('visibility','hidden'); 
    }); 
}); 
</script> 

Here是可見的區別的一個很好的解釋：隱藏與顯示：無。