javascript - 我将如何制作一个使用纯 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;
}