Question

我几乎没有JavaScript体验，所以如果有人可以帮助我，我会非常感激...

我正在尝试创建一个响应式菜单，但似乎无法弄清楚如何在菜单项被点击后让菜单“关闭”（当处于响应状态时）。

以下是我正在使用的教程：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属性实际上并未链接到任何地方，因为它是一个演示。使用相同的代码创建另一个页面，更改您的内容并从原始页面链接到该页面。您会在重定向到class="active"中指定的位置时看到菜单崩溃。

如果您想突出显示标签，请将其相应的列表项类更改为{{1}}。

单击菜单项后，如何“关闭”此响应式下拉菜单？

2 个答案: