我创建了一个简单的JavaScript语句来打开和关闭导航侧栏，但它只会成功打开它，我对为什么感到困惑？如果有人可以解释这将是非常有帮助的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../assets/css/signin.css" rel="stylesheet">
<link href="../assets/css/index.css" rel="stylesheet">
<title>Index</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="Nav()">×</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="Nav()">☰ open</span>
<script>
function Nav() {
if (document.getElementById("mySidenav").style.width = "0") {
document.getElementById("mySidenav").style.width = "250px";
}
else {
document.getElementById("mySidenav").style.width = "0";
}
}
</script>
</body>
</html>
<!--JavaScript at end of body for optimized loading-->
<!-- <script type="text/javascript" src="./js/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="./js/popper.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
</body>
</html>```
单个等号是分配而不是比较。您的条件if是document.getElementById("mySidenav").style.width = "0"，它返回分配的值- "0"，（非空）字符串是真实的，因此else永远不会命中该块。
使用double或tripe equals进行比较。
function Nav() {
if (document.getElementById("mySidenav").style.width === "0") {
document.getElementById("mySidenav").style.width = "250px";
}
else {
document.getElementById("mySidenav").style.width = "0";
}
}
和之间的区别参见此处。=====
还值得注意的是，至少在Chrome中，0实际返回的宽度为，0px因此您可能需要将条件更改为document.getElementById("mySidenav").style.width === "0px"。
function Nav() {
if (document.getElementById("mySidenav").style.width === "0") {
document.getElementById("mySidenav").style.width = "250px";
}
else {
document.getElementById("mySidenav").style.width = "0";
}
}
var element = document.getElementsByTagName('div')[0];
element.style.width = "0";
console.log(element.style.width);