Question

我创建了一个简单的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>```

Answer 1

单个等号是分配而不是比较。 if中的条件是document.getElementById("mySidenav").style.width = "0"，它返回分配的值-"0"，（非空）字符串是真实的，因此else块不会被击中。

使用double或tripe等于进行比较。

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>

Answer 2

比较时如果“ width”等于“ 0”，则需要输入Double equals来进行比较，如下所示：

if( width == "0")

要获得更好的代码，您可以将导航查询放在这样的变量中：

<script>
        function Nav() {

            var sideNav = document.getElementById("mySidenav");

            if (navSide.style.width == "0") {
                sideNav.style.width = "250px";
            }
            else {
                sideNav.style.width = "0";
            }
        }
        </script>

更紧凑：

<script>
        function Nav() {

            var sideNav = document.getElementById("mySidenav");

            sideNav.style.width = navSide.style.width == "0" ? "250px" : "0";
        }
        </script>

简单的JavaScript语句不适用于侧面导航栏

2 个答案: