移动设备上的下拉菜单不会在第二次点击时隐藏

Question

I'm trying to put this dropdown menu on my website:

*https://codepen.io/sean_codes/pen/WdzgdY*

My website is totally mobile-friendly.

When I click to open the menu on the phone, it opens normally, but when I click the second time, it doesn't close. It closes only when I click away.

How do I put that menu to close when I click the menu icon a second time?

Answer 1

It is best to avoid the usage of hover on mobile devices. You will first have to check if the browser supports it via @media and create some sort of fallback in case it does not.
Try using input html element and set the type to checkbox for your dropdown buttons and toggle your dropdown with checked .
No need to use javascript for this.