Javascript 如何处理触摸屏设备上使用：hover和：focus可点击顶级链接的多级菜单？

请查看以下菜单：

.clearfix:：after{
内容：“；
明确：两者皆有；
显示：表格；
}
#我的菜单内部>ul{
利润率：10px；
宽度：100%；
背景颜色：黄色；
列表样式类型：无；
位置：相对位置；
}
#我的菜单内部>ul>li{
浮动：左；
利润率：20px；
}
#我的菜单内部>ul>li>a{
填充：20px；
边框：1px纯黑；
显示：块；
}
#我的菜单内部>ul>li>div.sub{
位置：绝对位置；
顶部：计算（100%-20px）；
背景色：红色；
填充：40px；
显示：无；
左：0；
宽度：100vw；
}
#我的菜单内部>ul>li a:hover+div.sub，#我的菜单内部>ul>li a:focus+div.sub，
#我的菜单内部>ul>li>div.sub:悬停，#我的菜单内部>ul>li>div.sub:焦点{
显示：块；
}

就在之前。。。

我认为一个好的做法是制作一个可见的可点击元素。您不仅应该考虑实现，还应该考虑用户将如何交互。用户需要知道有一个子菜单，要做到这一点，您可以添加一个小图标，它可能会出现在任何地方，即使我们可以

：hover

下面是一个简化的示例，默认情况下悬停可以工作。如果无法悬停，可以单击图标显示菜单。只需使用一个图标，让用户可以直观地点击

$（'li span'）。单击（函数（）{
$（this）.next（'.sub'）.toggleClass（'show'）；
$（this.toggleClass（'open'）；
})

.clearfix:：after{
内容：“；
明确：两者皆有；
显示：表格；
}
#我的菜单>ul{
利润率：10px；
宽度：100%；
背景颜色：黄色；
列表样式类型：无；
位置：相对位置；
}
#我的菜单内部>ul>li{
浮动：左；
利润率：20px；
}
#我的菜单内部>ul>li>a{
填充：20px；
边框：1px纯黑；
显示：内联块；
}
#我的菜单内部>ul>li>span{
文字装饰：无；
显示：内联块；
填充：20px 5px；
边框：1px纯黑；
右边距：-10px；
光标：指针；
}
#我的菜单内部>ul>li>span:之前{
内容：“▼"
}
#我的菜单内部>ul>li>跨度。打开：之前{
内容：“▲"
}
#我的菜单内部>ul>li>div.sub{
位置：绝对位置；
顶部：计算（100%-20px）；
背景色：红色；
填充：40px；
显示：无；
左：0；
宽度：100vw；
}
#我的菜单inner>ul>LIA:hover~div.sub，
#我的菜单内部>ul>li span:hover~div.sub，
#我的菜单inner>ul>LIA:focus~div.sub，
#我的菜单inner>ul>li span:focus~div.sub，
#我的菜单内部>ul>li>div.sub:悬停，
#我的菜单内部>ul>li>div.sub:focus，
#我的菜单内部>ul>li>div.sub:悬停，
#我的菜单内部>ul>li>div.sub.show{
显示：块；
}

只是之前的事。。。

+1因为这是一种有用的输入，解决了部分问题，但仍然不能解决触摸和双击的问题click@Blackbam为什么它不能解决触摸问题？现在您可以单击图标而不显示菜单，否？如果设计师和用户体验测试人员接受它，这是一个很好的解决方案；-）