试图用一个按钮打开/关闭一个div

Question

function openNav() {
    document.getElementById("mySidenav").style.width = "200px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

<div onclick="openNav()" class="minimenubutton"><img src="images/menu.png"/></div>

I'm looking for a way to have the function change every time I click this so that I can open my div with one button. As of right now, I have closeNav set to a button inside that div, but I'd like to do it all with just the "minimenubutton."

I'm new to Javascript so please go easy on me. I looked up toggles but couldn't figure them out.

Answer 1

You just need one function with 2 conditionals (if and else);

 function togNav() { var nav = document.getElementById("nav"); if (nav.style.width == '200px') { nav.style.width = '0'; nav.style.opacity = 0; } else { nav.style.width = "200px"; nav.style.opacity = 1; } } 

 #nav { transition: opactity 3s ease-in; opacity: 0; cursor: pointer; } 

 <p>Click under this paragraph</p> <nav id="nav" onclick="togNav()" class="minimenubutton"> <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" /> </nav> 

Answer 2

You can check css width of element using getComputedStyle() , toggle 0px , 200px ; set overflow to hidden at #mySidenav css

 #mySidenav { display: inline-block; width: 0px; position: relative; overflow: hidden; } 

 <script> function toggleNav() { var el = document.getElementById("mySidenav"); el.style.width = window.getComputedStyle(el).width === "0px" ? "200px" : "0px"; } </script> <div id="mySidenav">side nav</div> <div onclick="toggleNav()" class="minimenubutton"> <img src="http://lorempixel.com/50/50/nature" /> </div> 

Answer 3

You can also achieve this using checkbox + div if layout allows. Without Javascript at all.

 input.toggler { display: none; } input.toggler + label + div { display: none; } input.toggler:checked + label + div { display: block; } 

 <input type=checkbox id=sometoggler class=toggler /> <label for=sometoggler>open/close</label> <div>content to show / hide </div> 

Answer 4

function toggleNav() {
    var el = document.getElementById("mySidenav");
    if(el.style.width == "200px"){
        el.style.width = "0px";
    } else {
        el.style.width = "200px";
    }
}

<div onclick="toggleNav()" class="minimenubutton"><img src="images/menu.png"/></div>

Answer 5

Just check the width of the element first. if the element has a width of 200px then set it to 0px, but if its not 200px it must be 0px; So set the width to 200px.

function togNav() {
    var e = document.getElementById("mySidenav");
    if (e.style.width == "200px") ? e.style.width = "0px" : e.style.width = "200px";
}