Javascript li：移动设备上的悬停下拉菜单_Javascript_Css_Mobile_Html Lists

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

javascript css mobile

Javascript li：移动设备上的悬停下拉菜单,javascript,css,mobile,html-lists,Javascript,Css,Mobile,Html Lists,如何让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} &l

如何让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>


li：移动设备上的悬停下拉菜单
li ul{显示：无}
li：悬停ul{display:block}

选择

级别2


window.onload=函数（）{
document.getElementById（'li'）。onclick=function（）{
document.getElementById（'div'）.innerHTML=document.getElementById（'li'）.getAttribute（'data-info'）；
}
}

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

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

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

< P>如果你只是想在响应设计或移动版本上获得多级菜单，请考虑一下：它将列表菜单变成一个选择。您可以为它指定要启动的视口，以及要使用的菜单，甚至可以组合菜单

在移动设备中没有悬停事件这样做是不好的做法，请使用类似于此id=“div”的引号结束此操作，谢谢shakti:）C-Link，在html-5中，如果不使用引号，则不需要引号：空格、双引号和单引号、等号、大于号。但是谢谢你的信息！你是说我不应该在移动设备上使用“li下拉菜单”吗？是否有解决方案？请检查此项并调整浏览器屏幕的大小，然后检查是否有解决方案。谢谢：）