javascript - 简单的 JavaScript 语句不适用于侧边导航栏

我创建了一个简单的 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()">&times;</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()">&#9776; 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 block 。

使用双等号或三等号进行比较。

function Nav() {
  if (document.getElementById("mySidenav").style.width === "0") {
    document.getElementById("mySidenav").style.width = "250px";
  }
  else {
    document.getElementById("mySidenav").style.width = "0";
  }
}

参见 here == 和 === 的区别。

还值得注意的是，至少在 Chrome 中，0 的宽度实际上返回为 0px，因此您可能需要将条件更改为 document .getElementById("mySidenav").style.width === "0px".

var element = document.getElementsByTagName('div')[0];

element.style.width = "0";
console.log(element.style.width);

<div></div>

关于javascript - 简单的 JavaScript 语句不适用于侧边导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58883814/

javascript - 简单的 JavaScript 语句不适用于侧边导航栏

上一篇：sql - 我只需要显示 varchar2 数据类型列中的数值而不使用任何正则表达式

下一篇：git - hggit 不导出未 merge 的分支