如何使用纯JavaScript创建一个隐藏DIV的系统？

Question

所以，我正在制作一个网页。它有这个固定的侧栏，隐藏在点击...

我有两个较小的DIV指定用于隐藏和关闭（sideBarClose，sideBarOpen）

单击它们时，它们会按照隐藏主div的指定执行。

我希望用纯JavaScript完成，而不是jQuery或其他。

Answer 1

我可以告诉你对JavaScript很新。用jQuery做它会更好，但是因为你想要JavaScript：

我会做这样的事情，

<script>
function hide()  {
    document.getElementById("mainDiv").style.display = "none";
    document.getElementById("sideBarOpen").style.display = "inline";
}

function unhide()  {
    document.getElementById("mainDiv").style.display = "inline";
    document.getElementById("sideBarClose").style.display = "none";
}
</script>

然后，在你的html中：

<div id="sideBarOpen" onclick="unhide()"></div>
<div id="mainDiv">
   <div id="sideBarClose" onclick="hide()">
</div>

注意！确保在您的样式中将sideBarClose的显示设置为无：

#sideBarClose  {
display: none;
}