移动端Safari浏览器汉堡菜单点击不显示问题求助

一、汉堡菜单点击无响应的解决方案 #

1. 确保DOM加载完成后执行JS #

Safari下如果JS代码在DOM元素渲染前执行，会导致获取不到元素、事件绑定失败。将JS代码包裹在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', function() {
  const menuIcon = document.getElementById("menuIcon");
  const closeIcon = document.getElementById("closeIcon");
  const mobileLinks = document.getElementById("mobileLinks");

  function openMenu() {
    menuIcon.style.display = "none";
    closeIcon.style.display = "block";
    mobileLinks.style.display = "block";
  }

  function closeMenu() {
    menuIcon.style.display = "block";
    closeIcon.style.display = "none";
    mobileLinks.style.display = "none";
  }

  menuIcon.addEventListener("click", openMenu);
  closeIcon.addEventListener("click", closeMenu);
});

2. 添加移动端触摸事件支持 #

Safari移动端对纯click事件的响应可能存在延迟或失效，同时监听touchstart事件：

// 在上述代码中补充：
menuIcon.addEventListener("touchstart", openMenu);
closeIcon.addEventListener("touchstart", closeMenu);

3. 确保点击区域可交互 #

给菜单图标容器添加CSS，保证点击区域有效：

.menuIcon, .closeIcon {
  cursor: pointer;
  pointer-events: auto;
  /* 可选：设置宽高确保点击区域足够大 */
  width: 40px;
  height: 40px;
}

4. 验证初始CSS状态 #

确认.closeIcon和#mobileLinks的初始样式为display: none;：

.closeIcon, #mobileLinks {
  display: none;
}

二、消除Safari的favicon报错 #

Safari会自动请求根目录的favicon.ico，即使未设置该图标。在HTML的<head>中添加以下代码即可解决：

<link rel="icon" href="data:,">

内容的提问来源于stack exchange，提问作者Matteo