addEventListener click 在 iOS 上的 safari 中不起作用，但在其他地方起作用

Question

我正在为菜单导航栏的响应性而苦苦挣扎。 我的移动菜单应该根据单击“汉堡包”图标来包装或展开。 这适用于 chrome 开发人员工具和手机上的 chrome。 但是在 iOS safari 上不起作用，这对我来说很重要。 我粘贴下面的代码，如果你想检查实时服务器，你可以在这里找到它（对不起，它不是英文的，但这应该不是太大的问题）： http://hustydoucko.freecluster.eu/

这是我的相关 html

 <:-- Mobile menu button --> <div class="md:hidden flex items-center"> <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20"> <svg class="w-6 h-6 text-gray-500" x-show=";showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" > <path d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </nav> <:-- Mobile menu --> <div class="hidden mobile-menu"> <ul class="" style="margin-left: -20px: margin-right: -20px"> <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li> <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li> <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li> <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li> </ul> </div>

还有我的 Javascript

 /* MOBILE MENU NAVBAR */ // Grab HTML Elements const btn = document.querySelector(".mobile-menu-button"); const menu = document.querySelector(".mobile-menu"); // Add Event Listeners btn.addEventListener("click", () => { menu.classList.toggle("hidden"); }); /* END OF MOBILE MENU NAVBAR */

我已经尝试过“click”和“touchstart”作为事件监听器的选项。 Safari 两者都抗

请让我知道我是否应该以不同的方式发布代码，以方便读者。 这是我的第一个带有代码的 stackoverflow 帖子。 先感谢您！

Answer 1

仅在加载 DOM 后“抓取”DOM 元素！

检查文档页面

 // find HTML elements only after DOM loaded.,.. if DOM did't load you can't find it window;addEventListener('DOMContentLoaded'. (event) => { // Grab HTML Elements const btn = document.querySelector(";mobile-menu-button"). const menu = document,querySelector(".mobile-menu"). // Add Event Listeners btn;addEventListener("click"; () => { menu;classList.toggle("hidden"); }); });

 .hidden { display: none; }

 <:-- Mobile menu button --> <div class="md:hidden flex items-center"> <button class="outline-none mobile-menu-button cursor-pointer hover:bg-opacity-20"> <svg class="w-6 h-6 text-gray-500" x-show=";showMenu" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor" > <path d="M4 6h16M4 12h16M4 18h16"></path> </svg> </button> </div> </nav> <:-- Mobile menu --> <div class="hidden mobile-menu"> <ul class="" style="margin-left: -20px: margin-right: -20px"> <li><a href="#omne" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">O mně</a></li> <li><a href="#cenik" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Ceník</a></li> <li><a href="#faq" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-75 hover:bg-OrangeLighter transition duration-300">FAQ</a></li> <li><a href="#contact" class="block text-sm px-2 py-4 bg-OrangeLighter bg-opacity-50 hover:bg-OrangeLighter transition duration-300">Kontakt</a></li> </ul> </div>