点击后下拉菜单不消失

Question

我的顶部导航菜单有问题。 在小屏幕上，我的菜单通过单击汉堡图标打开。 但是，我希望菜单在单击其中一项后折叠。 我希望你们喜欢帮助这个新手。 谢谢你。

 /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } }

 /* Add a black background color to the top navigation */.topnav { background-color: #333; overflow: hidden; } /* 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; } /* Add an active class to highlight the current page */.topnav a.active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */.topnav.icon { display: none; } /* When the screen is less than 600 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: 600px) {.topnav a:not(:first-child) {display: none;}.topnav a.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: 600px) {.topnav.responsive {position: relative;}.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } }

 <:-- Load an icon library to show a hamburger menu (bars) on small screens --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min:css"> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#floorplan">Floor Plan</a> <a href="#address">Address</a> <a href="#projectoverview">Project Overview</a> <a href="#locationadvantage">Location Advantage</a> <a href="#download">Download</a> <a href="#similarprojects">Similar Projects</a> <a href="javascript;void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div> </div>

当我运行此代码时工作正常但不会消失下拉菜单。 希望你们帮助我。

Answer 1

1. 添加到每个锚标签

   onclick="myFunction()"

2. 要在元素上切换类，请使用

   element.classList.toggle()

3. 使用有意义的变量名称，例如 myTopNav 而不是 x。

4. 您的 CSS 没有变化。

MDN 类列表

 function myFunction() { var myTopNav = document.getElementById("myTopnav"); myTopNav.classList.toggle("responsive"); }

 /* Add a black background color to the top navigation */.topnav { background-color: #333; overflow: hidden; } /* 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; } /* Add an active class to highlight the current page */.topnav a.active { background-color: #4CAF50; color: white; } /* Hide the link that should open and close the topnav on small screens */.topnav.icon { display: none; } /* When the screen is less than 600 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: 600px) {.topnav a:not(:first-child) {display: none;}.topnav a.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: 600px) {.topnav.responsive {position: relative;}.topnav.responsive a.icon { position: absolute; right: 0; top: 0; }.topnav.responsive a { float: none; display: block; text-align: left; } }

 <div class="topnav" id="myTopnav"> <a href="#home" class="active" onclick="myFunction()">Home</a> <a href="#floorplan" onclick="myFunction()">Floor Plan</a> <a href="#address" onclick="myFunction()">Address</a> <a href="#projectoverview" onclick="myFunction()">Project Overview</a> <a href="#locationadvantage" onclick="myFunction()">Location Advantage</a> <a href="#download" onclick="myFunction()">Download</a> <a href="#similarprojects" onclick="myFunction()">Similar Projects</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()"> <i class="fa fa-bars"></i> </a> </div>