li:hover 移动设备上的下拉菜单答案

【问题标题】：li:hover dropdown menu on mobile devicesli:hover 移动设备上的下拉菜单
【发布时间】：2013-09-19 08:39:25
【问题描述】：

如何让 li:hover 在移动设备上正常工作？

在 iphone 上它甚至无法打开，在 android 上它在触摸后不会关闭：S

我想创建一个自定义下拉菜单，我需要 javascript 从被点击的 li 中获取信息。

<!DOCTYPE html>
<title>li:hover dropdown menu on mobile devices</title>

<style>
li ul{display:none}
li:hover ul{display:block}
</style>

<ul>
<li><div id=div>chose</div>
<ul>
<li id=li data-info="som data">level 2
</ul>
</ul>

<script>
window.onload = function(){
document.getElementById('li').onclick = function(){
document.getElementById('div').innerHTML = document.getElementById('li').getAttribute('data-info');
}
}
</script>

【问题讨论】：

在移动设备中没有悬停事件
这样做 id=div 不是一个好习惯，请用 id="div" 之类的引号关闭它
感谢 shakti :) C-Link，在 html-5 中如果没有使用引号，则不需要：空格、双引号和单引号、等号、大于号。但是感谢您的信息！

标签： javascript css mobile html-lists

【解决方案1】：

:hover 伪类需要一个指向（图形输入）设备，能够区分指向和选择/激活的动作。通常在带有触摸界面的移动设备上，您没有前者，只有后者。还有一些笔界面只允许激活，不能指点。

:hover 伪类在用户指定一个元素（使用一些指针设备）时应用，但不激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的符合标准的用户代理可能无法支持这个伪类（例如，笔设备）。

W3C: CSS 2.1: Selectors, dynamic pseudo-classes

所以，回答您的问题：这取决于设备，但可能不是。不要依赖它。随着触摸屏设备的迅速普及，您将失去所有仅指点的事件。

【讨论】：

您是说我不应该在移动设备上使用“li 下拉菜单”吗？没有解决办法吗？
你能检查一下这个getbootstrap.com/examples/navbar并调整你的浏览器屏幕并检查一下吗
我觉得解决方案是 javscript。谢谢:)

【解决方案2】：

如果您只是希望在响应式设计或移动版本上使用多级菜单，请考虑以下内容：jQuery Responsive Menu Plugin 它将列表菜单变成选择。您可以指定要启动的视口，以及您想使用的菜单，甚至可以组合菜单。

【讨论】：