圖標不觸發功能

-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

我的實際代碼確實擁有所有我剛剛複製了我的代碼的問題區域的有效內容，因爲當只有一定數量的內容相關時，它會帶來相當多的文本:) –

圖標不觸發功能

回答

相關問題