移动设备上的 CSS 下拉菜单。如何解决：悬停答案

【问题标题】：CSS Drop down menu on mobile. how to get around :hover移动设备上的 CSS 下拉菜单。如何解决：悬停
【发布时间】：2013-11-24 20:58:40
【问题描述】：

我进行了搜索，但找不到任何东西，而且这是我第一次使用该网站，所以希望没有被问到。

我遇到了一个情况。我绝不是一个经验丰富的网站制作者。我边走边学。我有一个在桌面浏览器上运行良好的 CSS 下拉菜单。当我进入移动领域时，我遇到了一个问题，即:hover不起作用（显然）。

我找到了这个：http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly 但我无法让红润的东西工作。

我正在应用它的有问题的页面在这里：http://www.inkslinger.co.uk/calibre/index.html 我真的无法解决这个问题，它让我非常生气。任何帮助将不胜感激。

【问题讨论】：

标签： javascript html css mobile

【解决方案1】：

我遇到了同样的问题，并找到了我在这里使用过的简单解决方法 hover example

Post Natal 和 Ante Natal 选项在悬停时会触发下拉菜单，但您可能会注意到它们本身并不是链接。在我的原始模型中，它们是链接，但当我意识到这不适用于触摸设备时，我只是将它们制成下拉框的触发器，并将链接也放入框内。所以对你来说，你的“我们做什么”链接不是一个链接，只是下拉菜单的触发器，然后在菜单中你可以有你的链接到“我们做什么”信息。

另外值得记住的是，某些触控设备，比如一些 iPad，根本不喜欢悬停状态，如果你发现悬停状态不会触发你的下拉菜单，那么添加 'onclick="return true" ' 到有问题的列表项。这通常会使悬停状态像点击一样工作。

希望这会有所帮助，我所写的内容代表了大约 3 天的时间来研究我的参考书库。

【讨论】：

【解决方案2】：

我们遇到了这个问题并将悬停更改为点击。

【讨论】：

我遇到的问题是我的悬停菜单项之一，顶部链接也是指向另一个页面的链接。所以我认为点击不起作用？
@ikillbears 在“新的”响应式/自适应网络中，我们必须做出妥协。如果顶级菜单项是链接，则需要考虑更改它。
您可以将菜单从悬停切换到桌面版本，并使用触摸设备的点击。环境不同，触摸设备中不存在悬停。您可以使用媒体查询进行检测并切换 css 或内容。

【解决方案3】：

使用 :active 可能是一个好的开始，而不是使用悬停，这在触摸设备上当然是不可能的。在触摸设备上仍然可以选择某些内容，将菜单绑定到切换的活动状态就完成了。

【讨论】：

我已经尝试过我认为可行但似乎无法解决问题的地方。我发布的第一个链接包含从网站上的视频来看似乎是一个解决方案。但是，我这辈子都无法让它工作

【解决方案4】：

在这种情况下，您必须从悬停切换到点击事件。没有解决方法。

您绝对应该考虑将您的设计更改为具有汉堡风格的菜单，该菜单从左侧打开以供触摸设备使用。

从您发布的链接中查看此演示。当您在移动设备中打开它时，它会更改为不同的菜单样式。 http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

此外，如果您想将顶部链接作为指向其他页面的直接链接；为此，您可以在顶部按钮上单独单击两次。首先单击将打开菜单，打开菜单后，您可以像上面的演示那样为其分配直接链接。

【讨论】：

【解决方案5】：

将这行代码放在你的 head 标签中，如下所示：

<head>
  <script>document.addEventListener("touchstart", function(){}, true);</script>
</head>

为悬停元素创建一个像这样的活动类：

element:hover, element:active { Your CSS }

瞧。

【讨论】：