Javascript 响应菜单按钮仅在iOS设备上不起作用
我刚刚为我们的一款产品制作了一个简单的HTML/CSS网站,我对自己很满意,直到我的一位同事提到菜单在iOS设备上不起作用。。。这是真的 它不适用于iPhone(经过6、8和X测试),也不适用于iPad,但在台式机、Android甚至模拟iOS设备的Chrome开发工具上都能很好地工作 我在这里完全迷路了,因为我已经尝试了以下方法:Javascript 响应菜单按钮仅在iOS设备上不起作用,javascript,html,ios,css,responsive-design,Javascript,Html,Ios,Css,Responsive Design,我刚刚为我们的一款产品制作了一个简单的HTML/CSS网站,我对自己很满意,直到我的一位同事提到菜单在iOS设备上不起作用。。。这是真的 它不适用于iPhone(经过6、8和X测试),也不适用于iPad,但在台式机、Android甚至模拟iOS设备的Chrome开发工具上都能很好地工作 我在这里完全迷路了,因为我已经尝试了以下方法: 将href=“javascript:void(0);”更改为href=“#” 将锚定标记更改为按钮标记 使用光标:指针将锚定标记更改为跨度标记 放一个指针:游标;
- 将
”更改为href=“javascript:void(0);
href=“#”
- 将锚定标记更改为按钮标记
- 使用光标:指针将锚定标记更改为跨度标记李>
- 放一个指针:游标;在锚定标记CSS中
- 我甚至试着把整个导航栏换成一个引导栏,但问题仍然存在
谢谢大家 我会继续使用“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的默认操作(请参阅),以便该功能可以运行。Hi Mark,谢谢您的回答!我实现了对测试版本的更改,但它仍然无法在iOS设备上运行。。。奇怪的是,#仍然附加在URL的末尾。@AlexSt Cyr,我进一步研究了这个问题,它似乎是iOS中的一个bug。根据,似乎要从href属性works中删除“#”,然后使用CSS
cursor:pointer代码>使它看起来仍然是一个链接。不确定这是否适合你的情况。嘿,马克,谢谢你的链接,刚刚完成测试,不,仍然不能在iOS上工作,但可以在其他设备上工作。。。在这一点上,我很确定这与iOS设备如何处理固定CSS定位或其他问题有关,因为一位同事曾经在点击菜单按钮并打开一个只能通过菜单访问的页面后疯狂地点击他的iPhone屏幕。我们没有看到任何链接tho,所以肯定是一种奇怪的行为!
function hambClick() {
var x = document.getElementById("myMenu");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
return false; // prevent default action
}