Question

如何获取li：悬停在移动设备上正常工作？

在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>

Answer 1

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

：hover伪类适用于用户指定元素（带有一些指点设备）但不激活它的情况。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。不支持交互式媒体的用户代理不必支持此伪类。一些支持交互式媒体的符合要求的用户代理可能无法支持该伪类（例如，笔设备）。

W3C: CSS 2.1: Selectors, dynamic pseudo-classes

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

Answer 2

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

li：在移动设备上悬停下拉菜单

2 个答案: