Question

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

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

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

将href="javascript:void(0);“更改为href="#"
将锚标签更改为按钮标签
使用光标：指针将锚标签更改为跨度标签；
放置指针：光标；在锚标签CSS中
我什至尝试将整个导航栏废弃为一个Bootstrap，但问题仍然存在

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

我在W3schools上获取了响应式菜单的代码。

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

如果有人可以帮助我，我将永远感激不已。我制作了一个Codepen，其中大部分原始代码都未修改here。

谢谢大家！

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后面加上＃号的默认操作（请参见What's the effect of adding 'return false' to a click event listener?）。

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

1 个答案: