我正在开发一个带有简单且纯 CSS 下拉菜单的网站。该网站应该在台式机和 iPad 上使用。我的下拉菜单使用:hover触摸屏上出现伪类和问题：菜单展开良好，但永远不会折叠。关闭它的唯一方法是从同一下拉菜单中打开另一个子菜单。我的目标是当我触摸菜单中的任何位置时我的菜单会崩溃DOM（当然菜单中除外）。经过多次研究，我们似乎无法做到这一点css /questions/tagged/css, js /questions/tagged/js是强制性的。我是一个初学者，我对 JS 没有任何技能，是否可以只用几个香草来做到这一点js /questions/tagged/js线路？我不想使用jquery /questions/tagged/jquery。这是我的代码：
/* ========================================================================= */
/* Global styles */
/* ========================================================================= */
html {
box-sizing: border-box;
font-size: 62.5%;
}
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body, input {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
img {
border: none;
}
/* ========================================================================= */
/* Layout styles */
/* ========================================================================= */
body > header, body > main {
margin: auto;
}
body > header {
padding-top : 20px;
width: 768px;
}
body > header > img {
width: 150px;
margin-left: 10px;
}
/* ========================================================================= */
/* Nav styles */
/* ========================================================================= */
body > header > nav {
min-width: 768px;
margin: 0 auto;
padding-top: 20px;
font-size: 1.5em;
text-align: center;
}
nav > ul ul {
position: absolute;
display: none;
text-align: left;
}
nav li {
width: 150px;
}
nav > ul > li {
display: inline-block;
}
nav a {
display: block;
text-decoration: none;
}
nav > ul > li > a {
padding: 10px 0;
color: #44546A;
}
nav > ul ul li {
background-color: #333F50;
list-style-type: none;
}
nav > ul ul li a {
padding: 10px 0 10px 30px;
color: #FAFAFA;
font-size: 0.9em;
}
nav > ul li:hover ul {
display: block;
}
nav > ul ul li:hover {
background-color: #51647f;
}
<!DOCTYPE html>
<html>
<head>
<base href="/"/>
<meta charset="UTF-8"/>
<title>Test Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>
<body>
<header>
<img src="img/test.svg" alt="test"/>
<nav>
<ul>
<li>
<a href="#">Menu 1</a>
<ul class="subMenu">
<li>
<a href="#">SubMenu 1.1</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li>
<a href="#">SubMenu 2.1</a>
</li>
<li>
<a href="#">SubMenu 2.2</a>
</li>
<li>
<a href="#">SubMenu 2.3</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li>
<a href="#">SubMenu 3.1</a>
</li>
</ul>
</li>
<li>
<a href="#">Menu 4</a>
<ul class="subMenu">
<li>
<a href="#">SubMenu 4.1</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
编辑：该代码在平板电脑上运行良好，但在 iPad 上运行不佳
The :hover伪类在触摸屏设备上的行为有所不同。当用户触摸某个元素时，浏览器触发并保持状态:hover直到另一个伪类被触发。因此，当用户触摸页面上的另一个元素时，浏览器会触发不同的伪类，并且下拉菜单将被隐藏。大多数时候，它是:active被触发的伪类。
然而，正如上所解释的Safari 开发者库 https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html, Mobile Safari 不会触发:active伪类，除非元素附加了触摸事件：
在 iOS 上，鼠标事件发送得非常快，以至于
永远不会收到关闭或活动状态。因此，:active仅当有触摸事件设置时才会触发伪状态
HTML 元素 - 例如，当在元素上设置 ontouchstart 时...
要解决此问题，您可以添加touchstart侦听您的文档以触发:active伪类：
document.addEventListener('touchstart', function() {});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
