单击菜单项后如何 "close" 这个响应式下拉菜单？

Question

我几乎没有 JavaScript 经验，所以如果有人能帮我解决这个问题，我将不胜感激...

我正在尝试创建响应式菜单，但似乎无法弄清楚如何在单击菜单项后将菜单设置为 "close"（处于响应状态时）。

这是我正在使用的教程：http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

此外，在菜单的无响应状态下，我希望菜单项在被单击后保持突出显示（以便用户知道哪个选项卡处于活动状态）。

谁能帮我解决这个问题？提前致谢！

Answer 1

您可以添加对 A 标签的 onclick 处理程序的 myFunction() 调用，以便在单击链接时执行，如下所示：

<ul class="topnav">
  <li><a class="active" href="#home" onclick="myFunction()">Home</a></li>
  <li><a href="#news" onclick="myFunction()">News</a></li>
  <li><a href="#contact" onclick="myFunction()">Contact</a></li>
  <li><a href="#about" onclick="myFunction()">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
  </li>
</ul>

在此处查看演示： http://jsbin.com/lafepitopu/edit?html,output

Answer 2

菜单看起来很有效。您的列表项的 href 属性实际上不会 link 到任何地方，因为它是一个演示。使用相同的代码创建另一个页面，更改您的内容并将 link 从您的原始页面更改为该页面。重定向到 href 中指定的位置后，您会看到菜单折叠。

如果您想要突出显示某个选项卡，请将其相应的列表项 class 更改为 class="active"。

单击菜单项后如何 "close" 这个响应式下拉菜单？

How do I "close" this responsive dropdown menu after clicking a menu item?

html

javascript

css

responsive