Question

我使用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>

Answer 1

无法悬停在触控设备中。

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

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

DEMO，Complete Code

如何通过触摸设备处理mutli级别下拉菜单

1 个答案: