css - 仅 CSS 下拉菜单不喜欢 iPad 等。跟随菜单链接而不显示菜单

Question

我们在这里创建了一个新网站 www.worthingleisure.co.uk/splashpoint

它在顶部有一个纯 CSS 菜单，通过使用 li:hover ul 方法并适当地显示和隐藏，它应该适用于 iPad、iPhone 和其他基于触摸的设备。

但是，例如，如果您点击“设施”，它会跟随链接，并且在加载“设施”页面时只会暂时显示菜单。如果您回击，则菜单显示正常！我确信这曾经可以正常工作，但现在已停止工作。

我已经画了一个空白并尝试了一切以使其成为“点击”打开菜单，“第二次点击”遵循超链接的 URL 并绘制空白，包括按照其他地方的建议将“onclick ='return false'”放在 li 项目中.

有没有人有任何想法，我整个上午都在研究这个问题，但无法找到答案，但其他仅 CSS 的菜单工作得非常好，我无法理解它们和我们的菜单有什么不同。

非常感谢，维姬

score 1 · Accepted Answer

好的，所以这是其他人所说的高潮。您可以在 iPad 上制作悬停效果，但这取决于具体情况。它不适用于您的原因是因为“设施”菜单项也是一个链接。因此，当您按下它时，它会触发悬停和点击（这就是您返回页面时看到它的原因）。

如果设施是一个跨度并且仍然具有正确的 CSS 悬停，那么它会起作用，因为您正在点击它但没有点击链接。

由于您可能希望像其他人建议的那样保留这些父类别链接，因此您希望使用 Javascript/jQuery 来抑制默认操作（但仅适用于触摸事件设备，因为您不希望它在具有鼠）。

score 0 · Accepted Answer

我有同样的问题。这个页面帮助解释了一些关于 iOS 如何处理:hover状态的事情：

基本上，如果:hover规则更改了子元素的displayor ，iOS 将触发悬停状态而不是立即加载链接。visibility

然后我还意识到，当悬停状态涉及 CSS 转换时，iOS 会立即加载链接，而不是在悬停状态上暂停。所以我不得不通过有条件地在 body 上应用一个类来禁用我的 iOS 转换......

.ios .nav li ul {
    -webkit-transition: none;
    transition: none;
}

score 0 · Accepted Answer

正如您设置的问题中所述onClick="return false"，我想应该是这样onClick="return true"。无论如何，这解决了我的问题，虽然这个问题很老，但我希望这对某人有所帮助。

score 0 · Accepted Answer

我在这里发布了一个解决方案（涉及检测单击 + 悬停事件之间的延迟时间差异）：Mobile (touch) device friendly dropdown menu in css / jquery

4 回答 4