如何使用javascript和css使条形显示和消失

Question

我正在尝试制作一个当我单击按钮时出现的栏，当我点击屏幕的其余部分但我无法使其工作时消失。

HTML：

<div class="header">
    <nav class="navbar navbar-default navbar-fixed-top">
        <a class="bar" href="">
            <i onclick="openbar();" class="glyphicon glyphicon-align-justify"></i>
        </a>
        <div class="container">
            <div class="left">  
                <h2 class="invisible">hola</h2>
            </div>
            <div class="center">    
                <h1 class="title">Project Ignite</h1>
            </div>
            <div class="right"> 
                <h2 class="invisible">hola</h2>
            </div>
        </div>
    </nav>
</div>

<div class="body">
    <div class="container"></div>
    <div class="bar" id="bar"></div>
</div>

使用Javascript：

function openbar() {

document.getElementById('bar').classList.toggle('openbar');

}

CSS：

.bar {
    position:absolute;
    float: left;
    background-color: #F89406;
    width: 0%;
    height: 100%;
}
.openbar {
    position:absolute;
    float: left;
    background-color: #F89406;
    width: 12%;
    height: 100%;
}
.bar i {
    color: white;
    font-size: 32px;
    float: left;
    position: absolute;
    padding-top: 16px;
    padding-left: 16px;
}

.icon-bar {
    width: 120px;
    height: 120px;
    color: red;
}

我该怎么做才能解决我的问题？ 谢谢你先进，moloco PS：我是JS的新手

Answer 1

那应该有效：

function openbar() {
  document.getElementById('bar').classList.toggle('openbar');
}

.bar {
  position: absolute;
  float: left;
  background-color: #F89406;
  width: 12%;
  height: 10%;
}
#bar {
  display: none;
}
.openbar {
  display: block !important;
}
.bar i {
  color: white;
  font-size: 32px;
  float: left;
  position: absolute;
  padding-top: 16px;
  padding-left: 16px;
}
.icon-bar {
  width: 120px;
  height: 120px;
  color: red;
}

<div class="header">
  <nav class="navbar navbar-default navbar-fixed-top">
    <a class="bar">
      <i onclick="openbar();" class="glyphicon glyphicon-align-justify">click me</i>
    </a>
    <div class="container">
      <div class="left">
        <h2 class="invisible">hola</h2>
      </div>
      <div class="center">
        <h1 class="title">Project Ignite</h1>
      </div>
      <div class="right">
        <h2 class="invisible">hola</h2>
      </div>
    </div>
  </nav>
</div>
<div class="body">
  <div class="container">
  </div>
  <div class="bar" id="bar">

  </div>
</div>