試圖用一個按鈕打開/關閉一個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";
}