Ipad 上的下拉菜单 css/js [英] Dropdown menu css / js on Ipad
问题描述
我正在开发一个带有简单纯 css 下拉菜单的网站.该网站应该在台式机和 Ipad 上使用.我的下拉菜单使用 :hover 伪类，问题出现在触摸屏上:菜单展开得很好，但永远不会折叠.关闭它的唯一方法是从同一个下拉菜单中打开另一个子菜单.我的目标是当我触摸 DOM 中的任何地方(当然菜单除外)时，我的菜单会折叠起来.经过多次研究，似乎我们不能用 css, js 是必须的.我是初学者，我没有 JS 技能，是否可以只用很少的香草 js 行?我不想使用 jquery.这是我的代码:
I'm working on a website with a simple and pure css dropdown menu. That website is supposed to be used on desktop and on Ipads. My dropdown menu uses :hover pseudo-class and issue appears on the touch screen: the menu expands well but it never collapse. The only way to close it is to open another submenu from the same dropdown menu. My goal is that my menu collapse when I touch anywhere in the DOM (except in the menu of course). After many researches, it appears that we can not do this with css, js is obligatory. I am a beginner and I have no skill in JS, is it possible to do it with only few vanilla js lines ? I don't want to use jquery. Here is my code:
/* ========================================================================= */
/* 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
Edit : That code works well on tablets but not on Ipads
推荐答案
:hover 伪类在触摸屏设备上的行为有所不同.当用户触摸一个元素时，浏览器会触发并保持状态 :hover 直到另一个伪类被触发.因此，当用户触摸页面上的另一个元素时，浏览器会触发不同的伪类，并且下拉菜单会隐藏.大多数情况下，触发的是 :active 伪类.
The :hover pseudo-class behaves differently on touch screen devices. When the user touches an element, the browser triggers and keeps the state :hover until another pseudo-class is triggered. Thus, when the user touches another element on the page, a different pseudo-class is triggered by the browser and the drop-down menu becomes hidden. Most of the time, it is the :active pseudo-class that is triggered.
但是，如 Safari 中所述开发者库，Mobile Safari 不会触发 :active 伪类，除非将触摸事件附加到元素:
However, as explained on the Safari Developer Library, Mobile Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element:
在 iOS 上，鼠标事件发送得如此之快以至于永远不会收到 down 或 active 状态.因此，:active伪状态只有在设置了触摸事件时才会触发HTML 元素——例如，当在元素上设置了 ontouchstart 时...
On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the
:activepseudo state is triggered only when there is a touch event set on the HTML element—for example, when ontouchstart is set on the element...
要解决此问题，您可以在文档中添加一个 touchstart 侦听器以触发 :active 伪类:
To fix this, you can add a touchstart listener to your document in order to trigger the :active pseudo-class:
document.addEventListener('touchstart', function() {});
这篇关于Ipad 上的下拉菜单 css/js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
