试图用一个按钮打开/关闭一个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>

我正在寻找一种方法，每次单击此功能都会对其进行更改，以便可以通过一个按钮打开div。 截至目前，我已经将closeNav设置为该div中的按钮，但是我只想使用“ minimenubutton”来完成所有操作。

我是Java语言的新手，所以请放轻松。 我抬头看拨动开关，但找不到。

Answer 1

您只需要一个带有2个条件的函数（if和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

您可以使用getComputedStyle()检查元素的css width ，切换0px ， 200px ； 将overflow设置为hidden在#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

如果布局允许，您还可以使用checkbox + div实现此目的。 完全没有Java语言。

 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

只需先检查元素的宽度即可。 如果元素的宽度为200px，则将其设置为0px，但如果元素宽度不为200px，则必须为0px； 因此，将宽度设置为200px。

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