JavaScript 不显示导航菜单

Posted 2023-02-16

【中文标题】JavaScript 不显示导航菜单

【英文标题】：JavaScript doesn't display nav menu

【发布时间】：2017-02-04 02:39:06

【问题描述】：

移动菜单看起来不错，并且可以响应大小变化，但是当您单击移动菜单时，它不会弹出或根本没有反应。

  <nav>
       <ul class="topnav" id="myTopnav">
      <li><a href="index.html" class="selected">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="skills.html">Skills</a></li>
      <li><a href="mywork.html"> My Work </a></li>
      <li><a href="contact.html">Contact</a></li>
      <li class="icon">
      <a href="scripts.js:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
    </ul>
  </nav>

这是 javascript

function myFunction() 
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") 
        x.className += "responsive";
     else 
        x.className = "topnav";
    

【问题讨论】：

请添加CSS，什么的；到目前为止，还无法判断它是否应该实际显示。

也许问题是 myTopnav 的类要么是topnav 要么是topnavresponsive ...你需要一个空格吗？ topnav responsive ...另外，考虑使用element.classList.contains element.classList.add element.classList.remove 作为替代更清洁的代码：p

【参考方案1】：

您可以在“响应式”之前插入一个空格。像这样：

function myFunction() 
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") 
        x.className += " responsive";
     else 
        x.className = "topnav";