您如何将 javascript 事件侦听器用于移动导航菜单？

Question

我非常有信心关于事件侦听器工作方式的一些细节我还没有完全弄清楚。我正在尝试制作一个移动导航菜单，该菜单会在选择菜单栏时滑入并填充视口菜单，并在a）再次选择栏时消失，b）当用户单击a link时。

我正在为此使用 vanilla javascript html 和 css 并且一直在摆弄 html 复选框和事件监听器一两天试图弄清楚出来。我有一些的运气，但还不足以让它完全发挥作用。我希望有人能帮助我！

到目前为止，选择条形图时会出现菜单。太好了——这就是我想要的。我的问题是，在单击 link 并且菜单消失后，条形图事件侦听器的功能就停止工作了。有人可以解释为什么会这样吗？我 link 编辑了下面的代码笔。

我认为它正在做类似的事情...... 开始：打开菜单是假的，单击菜单图标：打开菜单是正确的，单击菜单图标：打开菜单是错误的，单击菜单图标：打开菜单是正确的，单击 link inside menu: open menu is false, 单击菜单图标：打开菜单是错误的 <<< 我可能是错的，但无论如何，我仍然不想要这个。不确定如何 "reset" 选择 link 后的值。

[CodePen][1]


  [1]: https://codepen.io/finamoss/pen/mdegbMP

Answer 1

当您点击导航按钮时，您永远不会删除 .close-menu 的 class，因此您仍然应用了 class，它设置了屏幕外导航的位置.

您如何将 javascript 事件侦听器用于移动导航菜单？

How do you use javascript event listeners for mobile navigation menus?

javascript

mobile

events

menu