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

Question

我有一个javascript函数，可以通过单击名为Show / Hide search form的链接来显示或隐藏搜索表单来调用它：

<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>  

问题在于，在页面显示或隐藏名为DIV的{​​{1}}的过程中，页面变为空白。

searchform

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。