Question

好的，这基本上就是来自https://www.w3schools.com/howto/howto_js_topnav_responsive.asp的代码我有一切正常工作，除了某些原因我点击时无法获得汉堡包图标加载其他菜单链接...我已经尝试了一切，并盯着它直到我的眼睛是正方形，任何建议将不胜感激。

我的HTML：

     <body style= margin:20%;>
     <link rel="stylesheet" type="text/css" href="PeterPanStyle.css"> 


    <div class="topnav" id="myTopnav">
         <a href="Cover.html">Home</a>
         <a href="About.html"> About</a>
         <a href="XContents.html"> Contents</a>
         <a href="#">Glossary </a>
         <a href="#">Quiz! </a>
         <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>

     </div>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
    x.className += "responsive";
} else {
    x.className = "topnav";
}
</script>

我的CSS：

   .topnav {
   overflow: hidden;
   background-color: #333;
   }

   .topnav a {
 float: left;
 display: block;
 color: #f2f2f2;
 text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

.topnav a:hover {
 background-color: #ddd;
 color: black;
  }

.topnav .icon {
display: none;
}

@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
 .topnav a.icon {
float: right;
display: block;
 }
 }

@media screen and (max-width: 600px) {
 .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
   }
  .topnav.responsive a {
float: none;
display: block;
text-align: left;
}

 }

Answer 1

您的代码和示例代码之间的区别是空格。设置className属性时添加空格。

x.className += " responsive";

Answer 2

你在Javascript myFunction（）的末尾错过了一个结束大括号。

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

Answer 3

由于三个原因，您的代码无法正常运行。

这是无效的HTML。
您需要在响应之前添加空格。 x.className += " responsive";

您需要一个空格，因为这行代码会将（+=）一串文本追加到元素的当前class属性中。您的div类现在将变为class="topnavresponsive">而不是class="topnavresponsive">

JavaScript函数末尾缺少}。

您的有效HTML应如下所示。

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="PeterPanStyle.css">
</head>
<body>
    <div class="topnav" id="myTopnav">
        <a href="Cover.html">Home</a>
        <a href="About.html"> About</a>
        <a href="XContents.html"> Contents</a>
        <a href="#">Glossary </a>
        <a href="#">Quiz! </a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
    </div>
    <script>
        function myFunction() {
            var x = document.getElementById("myTopnav");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>

图标未触发该功能

3 个答案: