使用JS if语句用按钮更改div类(我做错了什么)

function navtoggle(elementRef) {
  if (document.getElementById('nav').className = 'closed') {
    document.getElementById('nav').className = 'open'
  } else if (document.getElementById('nav').className = 'open') {
    document.getElementById('nav').className = 'closed'
  };
}

.closed {
  display: none;
}
.open {
  display: block;
}
#navget {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 15px black;
}

<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>HTML Library</title>
</head>
<body>
  <div id="nav" class="closed">
    <ul>
      <li><a href="index.html"><h1>HOME</h1></a>
      </li>
    </ul>
  </div>
  <button onclick="JavaScript: navtoggle(this);" id="navget">NAV</button>
</body>
</html>

这是Html:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>HTML Library</title>
    </head>
    <body>
        <div id="nav" class="closed">
            <ul>
                <li><a href="index.html"><h1>HOME</h1></a></li>
            </ul>
        </div>
 <button onclick="JavaScript: navtoggle(this);" id="navget">NAV</button>
    </body>
</html>

JS：

function navtoggle(elementRef){
if (document.getElementById('nav').className = 'closed') 
    {document.getElementById('nav').className = 'open'}
else if (document.getElementById('nav').className = 'open')
    {document.getElementById('nav').className = 'closed'};
}

和CSS：

.closed {
    display: none;
}
.open {
    display: block;
}
#navget {
    width: 100px; height: 100px;
}

我知道只使用复选框会更容易，我也知道如何做到这一点。然而，我希望它只是一个按钮，这样我就可以让它看起来更好。我是JS的新手，所以请不要对这个愚蠢的问题过于苛刻。非常感谢。

在条件语句中，您可以使用"="而不是比较"=="

 if (document.getElementById('nav').className == 'closed') {
    document.getElementById('nav').className = 'open'
  } else if (document.getElementById('nav').className == 'open') {
    document.getElementById('nav').className = 'closed'

你的sintax有几个问题我在这里给你做了一个plunker，所以你可以看到所有的细节，但基本上：

function navtoggle(elementRef){
  if (document.getElementById('nav').className === 'closed')  {
    document.getElementById('nav').className = 'open'
  }
  else if (document.getElementById('nav').className === 'open'){
    document.getElementById('nav').className = 'closed'
  } //You was using semicolon here and that wasn't parsing well
}

我不知道是否错过了在标题中添加脚本，但请告诉我它是否有效

相关内容

最新更新

热门标签：