图标不触发功能

-3

好吧，这基本上是从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; 
} 

}

来源

2017-10-13 Alesha Honnor

*“我的Java出了什么问题？”* - 一件事它不是Java，它是JavaScript，一种不相关的语言。 – nnnnnn

W3Schools页面没有提及''... –

您在Javascript myFunction（）的末尾丢失了一个闭合大括号。

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

来源

2017-10-13 02:07:30

你可以看看你的代码使用什么叫linter。这些程序会在您编写代码时检查您的代码。 –

你的代码和示例代码之间的差异是一个空间。设置className属性时添加空格。

x.className += " responsive";

来源

2017-10-13 02:01:02

即使有空间，它仍然不起作用。：/ –

@AleshaHonnor尝试在'javascript'的末尾添加'}'。看来你还没有关闭你的功能。如果您打开浏览器控制台，您将能够找到错误报告以帮助识别问题。 – NewToJS

这工作NewToJS谢谢:) –

由于三个原因，您的代码不起作用。

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

你需要一个空间，因为这行代码被追加（+=）文本串到你的元素当前类属性。你的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>

来源

2017-10-13 02:13:36

我的实际代码确实拥有所有我刚刚复制了我的代码的问题区域的有效内容，因为当只有一定数量的内容相关时，它会带来相当多的文本:) –

图标不触发功能

回答

相关问题