どのように私はバーを表示し、JavaScriptとCSSを使用してdissapear

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; 
} 

私は私の問題を解決するために何ができますか？働くべきだとJS

Answer 1

に新しいイム： はmoloco、高度に PSありがとうそれは動作しませんでした

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>