javascript - CSS - 显示或隐藏 DIV 时页面变为空白

Question

我有一个 JavaScript 函数，可以通过单击名为 显示/隐藏搜索表单 的链接来调用该函数来显示或隐藏搜索表单:

<script>
function hide_show_form_search() {
    var x = document.getElementById("searchform");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }

}
</script>  

问题是，在页面显示或隐藏名为 searchform 的 DIV 期间，页面会变为空白。

CODEPEN:

https://codepen.io/daniele0410/pen/ReRoPy

如何解决这个问题？

Answer 1

我不确定我是否可以回答为什么当您单击显示/隐藏链接时整个页面会消失的问题。

但是我可以提出替代解决方案:

使用<span href='#' onclick="hide_show_search_form()" style="text-decoration: underline; cursor:pointer;">Show / Hide search form</span>调用您的隐藏/显示功能。 Here's some info on this usage .