基于W3学校的自适应导航栏未使用JavaScript打开

Question

It's probably something very simple given there's fewer than 90 lines of code across the html, css and js but I cannot see why it doesn't work. 考虑到整个html，css和js的代码少于90行，这可能很简单，但是我不明白为什么它不起作用。

It's mostly still formatting correctly, however the critcal issue is that clicking the button does not seem to run the javascript to change the class to responsive, or if it does, the responsive class is not working. 它大部分仍然可以正确格式化，但是严重的问题是，单击按钮似乎无法运行javascript来将类更改为响应式，或者如果响应，则响应式无法正常工作。

Live example available here https://jsfiddle.net/hh5brhfk/1/ 可在此处获得实时示例https://jsfiddle.net/hh5brhfk/1/

HTML: HTML：

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

 /* styling for the responsive nav bar */ .topnav .icon { display: none; /* Hide the link that should open and close the topnav on small screens */ } @media screen and (max-width:959px) { /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } .topnav ul { list-style-type: none; margin-top:0px; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } } /* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 959px) { .topnav li:not(:first-child) {display: none;} .topnav li.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 959px) { .topnav.responsive {position: relative;} .topnav.responsive li.icon { position: absolute; right: 0; top: 0; } .topnav.responsive li { float: none; display: block; text-align: left; } .topnav.responsive li a { float: none; display: block; text-align: left; } }

 <div class="topnav" id="nav-container"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="whatweteach.php">What we teach</a></li> <li><a href="gallery.php">Gallery</a></li> <li><a href="contact.php">Contact Us</a></li> <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> </ul> </nav> </div> <div style="padding-left:16px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div>

Answer 1

Just a few changes. 只是一些更改。

First of all, in JSFiddle you need to change the JavaScript settings load type to No wrap - in <head> 首先，在JSFiddle中，您需要将JavaScript设置的加载类型更改为No wrap - in <head>

Here's a SO answer on why you need to do this in JSFiddle. 这里有一个SO答案 ，说明为什么需要在JSFiddle中执行此操作。

Then notice you are querying an id myTopnav that does not exist. 然后注意，您正在查询的ID myTopnav不存在。

Instead you can query your existing topnav class like so: 相反，您可以像这样查询现有的topnav类：

var x = document.querySelector(".topnav");

Try the snippet below: 请尝试以下代码段：

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

 /* styling for the responsive nav bar */ .topnav .icon { display: none; /* Hide the link that should open and close the topnav on small screens */ } @media screen and (max-width:959px) { /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } .topnav ul { list-style-type: none; margin-top: 0px; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } } /* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 959px) { .topnav li:not(:first-child) { display: none; } .topnav li.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 959px) { .topnav.responsive { position: relative; } .topnav.responsive li.icon { position: absolute; right: 0; top: 0; } .topnav.responsive li { float: none; display: block; text-align: left; } .topnav.responsive li a { float: none; display: block; text-align: left; } }

 <div class="topnav" id="nav-container"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="whatweteach.php">What we teach</a></li> <li><a href="gallery.php">Gallery</a></li> <li><a href="contact.php">Contact Us</a></li> <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> </ul> </nav> </div> <div style="padding-left:16px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div>

Answer 2

If anyone else has the same issue it was caused by a missing div tag. 如果其他人也遇到相同的问题，则是由于缺少div标签引起的。

<div id="nav-container">
<div class="topnav" id="myTopnav">

Answer 3

You used myTopnav to getElementById but in your code don't have this. 您使用myTopnav来myTopnav ，但是在您的代码中却没有这个。 Used nav-container for that 用的nav-container

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

 /* styling for the responsive nav bar */ .topnav .icon { display: none; /* Hide the link that should open and close the topnav on small screens */ } @media screen and (max-width:959px) { /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } .topnav ul { list-style-type: none; margin-top:0px; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change the color of links on hover */ .topnav a:hover { background-color: #ddd; color: black; } } /* When the screen is less than 959 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 959px) { .topnav li:not(:first-child) {display: none;} .topnav li.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 959px) { .topnav.responsive {position: relative;} .topnav.responsive li.icon { position: absolute; right: 0; top: 0; } .topnav.responsive li { float: none; display: block; text-align: left; } .topnav.responsive li a { float: none; display: block; text-align: left; } }

 <div class="topnav" id="nav-container"> <nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="whatweteach.php">What we teach</a></li> <li><a href="gallery.php">Gallery</a></li> <li><a href="contact.php">Contact Us</a></li> <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li> </ul> </nav> </div> <div style="padding-left:16px"> <h2>Responsive Topnav Example</h2> <p>Resize the browser window to see how it works.</p> </div>

基于W3学校的自适应导航栏未使用JavaScript打开

问题描述

3 个解决方案

解决方案1
2 2017-10-10 12:32:42

解决方案2
0 2017-10-10 12:32:29

解决方案3
0 2017-10-10 12:37:49

基于W3学校的自适应导航栏未使用JavaScript打开

问题描述

3 个解决方案

解决方案1 2 2017-10-10 12:32:42

解决方案2 0 2017-10-10 12:32:29

解决方案3 0 2017-10-10 12:37:49

解决方案1
2 2017-10-10 12:32:42

解决方案2
0 2017-10-10 12:32:29

解决方案3
0 2017-10-10 12:37:49