【发布时间】：2021-02-20 06:16:40
【问题描述】：
如何使用 css 或 javascript 在触摸屏设备上制作多级下拉菜单？因为当我在触摸屏设备上测试我的网站时，我点击了下拉菜单（效果很好），但是当我试图摆脱下拉菜单时，我不能（除非我重新加载页面）。我希望它悬停在桌面上而不是悬停在触摸屏上。这甚至可能吗？这是我的 html 和 css 文本：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/
normalize.min.css">
<style>
@media (max-width: 640px) {
.main-navigation{
position: absolute;
top: 166px;
left: 173px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
background: #6e151e;
border-radius: 5px;
}
ul li {
display: block;
position: relative;
float: left;
background: #6e151e;
border-radius: 5px;
width: 130px;
}
li ul {
display: none;
position: absolute;
top: 37px;
left: 0px; }
ul li a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: #fff;
font-family: Helvetica;
font-size: 11px;
padding-top: 12px;
padding-bottom: 12px;
font-weight: 70000px;
border-radius: 5px;
text-align: center;
border-right: none;
}
ul li a:hover {
background: #054075;
transition: .4s ease;
}
li:hover > ul {
display: block;
position: absolute;
transition: .4s ease;
}
li:hover li {
float: none;
transition: .4s ease; }
li:hover a {
background: #6e151e;
transition: .4s ease;
}
li:hover li a:hover {
background: #054075;
transition: .4s ease;
}
@media (max-width: 640px) {
ul ul ul {
border-left: 1px solid #fff;
left: 130px;
top: 0px;
}
}
</style>
</head>
<body>
<ul class="main-navigation">
<li class="Menu"><a href="#">Menu</a>
<ul>
<li><a href="#">Section 1</a>
<ul>
<li><a href="#">Subsection 1</a></li>
<li><a href="#">Subsection 2</a></li>
<li><a href="#">Subsection 3</a></li>
<li><a href="#">Subsection 4</a></li>
</ul>
</li>
<li><a href="#">Section 1</a>
<ul>
<li><a href="#">Subsection 1</a>
</li>
<li><a href="#">Subsection 2</a></li>
<li><a href="#">Subsection 3</a></li>
<li><a href="#">Subsection 4</a></li>
</ul>
</li>
<li><a href="#">Section 3</a>
<ul>
<li><a href="#">Subsection 1</a>
</li>
<li><a href="#">Subsection 2</a></li>
<li><a href="#">Subsection 3</a></li>
<li><a href="#">Subsection 4</a>
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>
【问题讨论】：
-
stackoverflow.com/questions/11850466/…这里有一些JS线索。使用 return typeof window.ontouchstart !== 'undefined'; .click 和 event.preventDefault();玩这个jsfiddle。 jsfiddle.net/i_like_robots/6JbtX
标签： javascript html jquery css web