时间戳

首页 > 解决方案 > 简单的 JavaScript 语句不适用于侧导航栏

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>```

标签： javascripthtml

解决方案

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

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

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".

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

element.style.width = "0";
console.log(element.style.width);
<div></div>

推荐阅读