触摸设备如何处理多级下拉菜单答案

【问题标题】：How to deal with mutli level drop down menu by touch devices触摸设备如何处理多级下拉菜单
【发布时间】：2015-04-29 15:30:24
【问题描述】：

我使用 HTML 和 CSS 设计了一个网站。它包括三个级别的导航菜单，并且在桌面上运行良好。但是在触摸设备（智能手机和平板电脑）中会出现一个问题，即当触摸父菜单的元素时，子菜单仍然不显示，因为没有光标悬停在该项目上。

我该如何解决这个问题？

这里是菜单的代码：

<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<meta chrset="utf-8">
<meta name="author" content="ralph phillips">
<style>
* {margin:0px; padding:0px;}
body {font-family:verdana;background-color:#ABC;}
h1{text-align:center;border-bottom:2px solid #009;margin-bottom:50px;}
ul#navmenu, ul.sub1, ul.sub2{list-style:none;font-size:9pt;}
ul#navmenu li{width:125px;text-align:center;position:relative;float:left;margin-right:4px;}
ul#navmenu a{text-decoration:none;display:block;width:125px;height:25px;line-height:25px;background-color:#fff;border:1px solid #ccc;border-radius:5px;}
ul#navmenu .sub1 li{}
ul#navmenu .sub1 a{margin-top:5px;}
ul#navmenu .sub2 a{margin-left:10px;}
ul#navmenu li:hover > a{background-color:#cfc;}
ul#navmenu li:hover a:hover{background-color:#ff0;}
ul#navmenu ul.sub1{display:none;position:absolute;top:26px;left:0px;}
ul#navmenu ul.sub2{display:none;position:absolute;top:0px;left:126px;}
ul#navmenu li:hover .sub1{display:block;}
ul#navmenu .sub1 li:hover .sub2{display:block;}
</style>
</head>
<body>

<h1>navigation menu</h1>

<ul id="navmenu">
	<li><a href="#">hyperlink1</a></li>
	<li><a href="#">hyperlink2</a>
		<ul class="sub1">
			<li><a href="#">hyperlink2.1</a></li>
			<li><a href="#">hyperlink2.2</a></li>
			<li><a href="#">hyperlink2.3</a></li>
		</ul>
	</li>
	<li><a href="#">hyperlink3</a></li>
	<li><a href="#">hyperlink4</a>
		<ul class="sub1">
			<li><a href="#">hyperlink4.1</a></li>
			<li><a href="#">hyperlink4.2</a></li>
			<li><a href="#">hyperlink4.3</a>
				<ul class="sub2">
					<li><a href="#">hyperlink4.3.1</a></li>
					<li><a href="#">hyperlink4.3.2</a></li>
					<li><a href="#">hyperlink4.3.3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">hyperlink5</a></li>


</ul>


</body>
</html>

【问题讨论】：

看看这个解决方法：stackoverflow.com/a/42068197/6886695

标签： javascript jquery html css hover

【解决方案1】：

无法在触控设备上悬停。

对于在触摸设备中工作，您可以为此使用 Jquery Click 事件：

$("ul#navmenu li").click(function(){
    $('.sub1').removeClass('display');
    $(this).find('.sub1').addClass('display');
})

DEMO, Complete Code

【讨论】：