响应式菜单按钮仅在iOS设备上不起作用

Question

我刚刚为我们的一种产品制作了一个简单的HTML / CSS网站，对自己感到非常满意，直到我的一位同事提到菜单在iOS设备上不起作用...是的！

它不适用于iPhone（已测试6、8和X），也不适用于iPad，但在台式机，Android甚至是模拟iOS设备的Chrome开发工具上都可以正常使用。

我已经在这里迷路了，因为我已经尝试了以下方法：

• 将href="javascript:void(0); ”更改为href="#"
• 将锚标签更改为按钮标签
• 使用光标：指针将锚标签更改为跨度标签；
• 放一个指针：光标； 在锚标签CSS中
• 我什至尝试将整个导航栏都刮掉以作为一个引导区，但问题仍然存在

现在，我知道它必须与CSS或Javascript有关，因为按钮会将“点击”注册起来，因为当我将href更改为＃时，它将其添加到了页面的url中。

我在W3schools上使用了响应菜单的代码。

function hambClick() {
    var x = document.getElementById("myMenu");
    if (x.className === "menu") {
      x.className += " responsive";
    } else {
      x.className = "menu";
    }
  }

如果有人可以帮助我，我将永远感激不已。 我做了一个codepen大部分的原代码不变的位置 。

多谢你们！

Answer 1

我将返回在“ href”属性中使用“＃”字符，然后在函数中添加return false ，如下所示：

function hambClick() {
  var x = document.getElementById("myMenu");
  if (x.className === "menu") {
    x.className += " responsive";
  } else {
    x.className = "menu";
  }
  return false; // prevent default action
}

这将防止在地址栏中的URL后面附加＃的默认操作（请参阅向click事件监听器添加“ return false”有什么作用？ ），以便函数可以运行。