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

【问题标题】：CSS only drop down menu doesn't like iPad etc. Follows menu link without revealing menu仅 CSS 下拉菜单不喜欢 iPad 等。跟随菜单链接而不显示菜单
【发布时间】：2013-04-05 03:05:40
【问题描述】：

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

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

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

我已经画了一个空白并尝试了一切以使其成为“单击”打开菜单，“第二次单击”跟随超链接的 URL 并画了一个空白，包括在 li 项中放置“onclick='return false'”正如其他地方所建议的那样。

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

非常感谢，维姬

【问题讨论】：

纯 CSS 无法做到这一点。您需要使用 JS 来检测触摸事件并抑制链接的默认操作。
上次我检查您不能在平板电脑或智能手机等触控设备上“悬停”。
您在该页面上有 YouTube 视频吗？

标签： css ipad drop-down-menu touch

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

这个问题和你链接的问题一样吗？
这是完全相同的问题...希望初始 Touch 事件像悬停一样，并阻止它触发 Click 事件。抱歉，这是否意味着这应该被标记为重复而不是交叉链接？我是新来的。
是的，完全正确。如果这些问题相同，则应标记为 Dupe。如果应该合并答案或需要做一些更复杂的事情，您甚至可以添加一些解释性文本。谢谢！
感谢您的提示，但不幸的是，作为一个完整的新手，我缺乏为 Dupes 投关闭票，甚至为版主标记它的声誉。我能做的最好的就是链接到原始问题，实际上是suggested alternative。

【解决方案3】：

我遇到了同样的问题。本页帮助解释了 iOS 如何处理 :hover 状态的一些事情：

http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/

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

然后我还意识到，当悬停状态涉及 CSS 转换时，iOS 会立即加载链接，而不是在悬停状态上暂停。所以我不得不通过conditionally applying a class on the body 和...禁用我的 iOS 转换...

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

【讨论】：

【解决方案4】：

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

【讨论】：