iPhone 的 CSS3 菜单兼容性

Question

我一直在尝试常规的 CSS3 下拉菜单。

// CSS
.board {
width: 600px;
height: 50px;
cursor: pointer;
}

.button {
    width: 150px;
    height: 50px;
    float: left;
    display: inline;
    background-color: black;
    color: white;
    font: 20px Arial, Verdana, sans-serif;
}

.sboard {
    width: 150px;
    height: 100px;
    background-color: black;

}

//HTML
<ul class = "board"><li class = "button">
    <ul class = "sboard"></ul>
</li></ul>

由于我的设备对触摸没有响应，我似乎无法让它在 iPhone 上运行。我的谷歌研究结果毫无意义。我应该将哪些属性添加到列表中？

Answer 1

IOS 需要一些指示来表明菜单是触摸目标。在阅读了一些 Apple 文档(我现在找不到或者我会链接到它)之后，我们添加了 onclick="void(0)"到不是链接的菜单项。

我们的叶菜单项已经是链接 <a href="...">但是我们系统中的顶级和中间子菜单是<li><span>...</span></li>在我们添加 onclick 处理程序之前，IOS 不会使用react并打开子菜单。

这些变成了<li><span onclick="void(0)" onfocus="void(0)">...</span></li> (添加了 onfocus 以便键盘选项卡导航有效)