JavaScript SideNav OneButton切換

Question

我設法讓sidenav打開但不能關閉它。我讀過使用條件是要走的路，但在這裏它沒有做它應該做的事。

這裏是我的代碼：

var sidenav = document.getElementById("sidenav"); 
 
var page = document.getElementById("page"); 
 

 
function togNav() { 
 
    if (sidenav.style.width = '0px') { 
 
    sidenav.style.width = "200px"; 
 
    page.style.marginLeft = "200px"; 
 
    } else { 
 
    sidenav.style.width = "0px"; 
 
    page.style.marginLeft = "0px"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.openbtn { 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 

 
#bar { 
 
    width: 25px; 
 
    height: 3px; 
 
    margin: 6px; 
 
    background: #999; 
 
    border-radius: 5px; 
 
} 
 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #eee; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidenav li { 
 
    list-style-type: none; 
 
} 
 

 
.sidenav a { 
 
    color: #555; 
 
    display: block; 
 
    padding: 15px 0px 15px 75px; 
 
    text-decoration: none; 
 
    border-bottom: 0.1px #ddd solid; 
 
    font-weight: 300; 
 
    font-family: helvetica neue; 
 
} 
 

 
.sidenav a:hover { 
 
    background: #ddd; 
 
} 
 

 
#page { 
 
    margin-left: 0px; 
 
    transition: 0.5s; 
 
}

<div class="sidenav" id="sidenav"> 
 
    <ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 4</a></li> 
 
    <li><a href="#">Link 5</a></li> 
 
    </ul> 
 
</div> 
 
<div id="page"> 
 
    <button id="openbtn" class="openbtn" onclick="togNav()"> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    </button> 
 
</div>

Answer 1

如果條件是錯誤的。您正在使用=（分配），而不是使用==比較

var sidenav = document.getElementById("sidenav"); 
 
var page = document.getElementById("page"); 
 

 
function togNav() { 
 
    if (sidenav.style.width == '0px') { // here 
 
    sidenav.style.width = "200px"; 
 
    page.style.marginLeft = "200px"; 
 
    } else { 
 
    sidenav.style.width = "0px"; 
 
    page.style.marginLeft = "0px"; 
 
    } 
 
}

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.openbtn { 
 
    background: none; 
 
    border: none; 
 
    outline: none; 
 
    cursor: pointer; 
 
} 
 

 
#bar { 
 
    width: 25px; 
 
    height: 3px; 
 
    margin: 6px; 
 
    background: #999; 
 
    border-radius: 5px; 
 
} 
 

 

 
.sidenav { 
 
    height: 100%; 
 
    width: 0px; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #eee; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
} 
 

 
.sidenav ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidenav li { 
 
    list-style-type: none; 
 
} 
 

 
.sidenav a { 
 
    color: #555; 
 
    display: block; 
 
    padding: 15px 0px 15px 75px; 
 
    text-decoration: none; 
 
    border-bottom: 0.1px #ddd solid; 
 
    font-weight: 300; 
 
    font-family: helvetica neue; 
 
} 
 

 
.sidenav a:hover { 
 
    background: #ddd; 
 
} 
 

 
#page { 
 
    margin-left: 0px; 
 
    transition: 0.5s; 
 
}

<div class="sidenav" id="sidenav"> 
 
    <ul> 
 
    <li><a href="#">Link 1</a></li> 
 
    <li><a href="#">Link 2</a></li> 
 
    <li><a href="#">Link 3</a></li> 
 
    <li><a href="#">Link 4</a></li> 
 
    <li><a href="#">Link 5</a></li> 
 
    </ul> 
 
</div> 
 
<div id="page"> 
 
    <button id="openbtn" class="openbtn" onclick="togNav()"> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    <div id="bar"></div> 
 
    </button> 
 
</div>