选择按钮时如何关闭侧边栏?

时间:2021-04-06 09:08:18

标签: javascript sidebar

我从未使用过 Javascript,而且我只编程了不到一年,所以如果我做了一些愚蠢的事情,请不要怪我。我的问题是,单击按钮时如何关闭侧边栏?我想我应该用 Javascript 来实现,但我不知道如何。

这是我的JS代码:

function show(){
  document.getElementById('sidebar').classList.toggle('active')
  document.getElementById('sidebarbg').classList.toggle('active')
}

CSS 代码(这显然不是完整的 css 代码,我删除的最多):

#sidebar{
  background-color: #cc2f70;
  width: 310px;
  height: 100%;
  position: fixed;
  left: -310px;
  transition-duration: 0.3s;
}
#sidebarbg{
  background-color: #00a6b7;
  width: 300px;
  height: 100%;
  position: fixed;
  left: -300px;
  transition-delay: 0.15s;
  transition-duration: 0.3s;
}
#sidebar.active{
  left: 0;
}
#sidebarbg.active{
  left: 0;
}
#sidebar ul{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.button{
  position: fixed;
  top: 30px;
  left: 220px;
  z-index: 5;
  transition: 0.4s;
}
.button span{
  width: 30px;
  height: 5px;
  background-color: white;
  display: block;
  margin: 5px;
}

html:

<div class="button" onclick="show()">
  <span>click here</span>
  <span></span>
  <span></span>
</div>
<div class="logo">
  <span>lo</span><br><span>go</span>
</div>
<div id="sidebar">
  <div id="sidebarbg"></div>
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">Home</a></li>
  </ul>
</div>    

1 个答案:

答案 0 :(得分:0)

添加这个脚本

-A
相关问题