如何用javascript显示/隐藏div？

Question

所以我想为用户设置隐藏一个div，它显示用户点击一个小齿轮图标的时间。对我来说，最好的方法是什么？

我做了几个非常基本的照片来展示我之后的事情：

关闭：

打开：

一旦用户点击图标（红点），我就希望隐藏的div将内容推到右边。我看了一下CSS复选框hack，但这需要用户再次直接点击图标（红点）来关闭隐藏的div。我想拥有它，以便用户可以点击页面上的任何其他位置来关闭div。

任何人都知道如何用纯粹的js做到这一点？

非常感谢任何帮助，谢谢！

Answer 1

您可以尝试tabindex="-1"以使用:focus。

这样你就可以用纯CSS实现它。

#wrapper {
  display: flex;
  position: fixed;
  top: 0;  right: 0;  bottom: 0;  left: 0;
}
#sidebar, #main, #hidden:focus {
  padding: 10px;
}
#sidebar {
  background: #A8D4AF;
}
#main {
  flex-grow: 1;
  background: #96A7B1;
}
#hidden {
  width: 0;
  background: #008DD2;
}
#hidden:before {
  content: '';
  display: block;
  background: red;
  border-radius: 50%;
  position: relative;
  left: -40px;  top: 40px;    /* Position of the dot*/
  width: 20px;  height: 20px; /* Size of the dot */
  margin-bottom: -20px;       /* Same as height */
}
#hidden:focus:before {
  display: none;
}
#hidden:focus {
  width: auto;
}

<div id="wrapper">
  <div id="sidebar">
    Test content
  </div>
  <div id="hidden" tabindex="-1">
    Hidden stuff
  </div>
  <div id="main">
    Lorem ipsum dolor
  </div>
</div>