我如何使用JavaScript和CSS使栏出现和消失

Question

i am trying to make a bar that appears when i click a button and disappears when i click the rest of the screen but i can not get it to work.

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

What can i do to solve my issue? Thank you in advanced, moloco PS: Im new to JS

Answer 1

That should work:

 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>