DIV隐藏元素空间调整

Question

我有一个奇怪的问题。

我正在使用切换来显示和隐藏网页内容。我基于javascript中的onclick事件更改了div元素的可见性，它工作正常。

我的问题是即使在onclick之前隐藏了一些内容，在页面中分配了空间，并且一旦发生click事件，文本就会出现在空间中。如果我们再次点击，文字就会消失。

我希望空间也消失，否则看起来很尴尬。我将附上图片以供进一步参考。请只有javascript，css和php没有jquery解决方案。

Answer 1

如果您正在做的事情，那么您应该使用CSS display: none而不是visibility: hidden。 visibility: hidden只是使元素不可见，但在文档中保留其位置，而display: none则完全从文档流中删除该项。

Answer 2

使用

display: none;

而不是

visibility: hidden;

Answer 3

如果没有看到您的代码，很难确定您的错误，但这是一个很好的例子。

<script language="javascript"> 
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
        ele.style.display = "none";
    text.innerHTML = "show";
}
else {
    ele.style.display = "block";
    text.innerHTML = "hide";
}
} 
</script>

<a id="displayText" href="javascript:toggle();">show</a> <== click Here
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>