如何將 javascript 事件監聽器用於移動導航菜單？

Question

我非常有信心有一些關於事件監聽器工作方式的細節我還沒有完全弄清楚。 我正在嘗試制作一個移動導航菜單，該菜單將在選擇菜單欄時滑入並填充視口菜單，並在a）再次選擇欄時消失，b）當用戶單擊鏈接時。

I am using vanilla javascript html and css for this and have been fiddling around with html checkboxes and event listeners for a day or two trying to figure it out. 我有一些運氣，但還不足以讓它完全發揮作用。 我希望有人可以幫助我！

So far the menu will appear when the bars are selected. 太好了——這就是我想要的。 我的問題是，單擊鏈接並且菜單消失后，欄的事件偵聽器的功能就會停止工作。 有人可以解釋為什么會這樣嗎？ 我在下面鏈接了codepen。

我認為它正在做類似的事情...開始：打開菜單為假，單擊菜單圖標：打開菜單為真，單擊菜單圖標：打開菜單為假，單擊菜單圖標：打開菜單為真，單擊菜單內的鏈接：打開菜單是錯誤的，單擊菜單圖標：打開菜單是錯誤的 <<< 我可能是錯的，但無論如何，我仍然不想要這個。 不確定如何在選擇鏈接后“重置”該值。

[CodePen][1]


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

Answer 1

當您單擊導航按鈕時，您永遠不會刪除 class of.close-menu，因此您仍然應用了 class，它正在設置導航屏幕外的 position。