我正在开发一个小型网站元素，目前只尝试使用 HTML 和 CSS，对桌面版本非常满意，但在我的 iPhone 上测试时，我可以通过单击展开汉堡菜单，但它不会第二次单击或在屏幕外单击时折叠。用 jquery 解决似乎相对容易，但我现在真的很想知道我是否可以不用它来解决这个问题？
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- for-mobile-apps -->
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Personal Website" />
<!-- //for-mobile-apps -->
</head>
<body>
<header>
<a href="index.html" id="logo"></a>
<nav>
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
CSS:
@media only screen and (max-width : 640px) {
header {
position: absolute;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
background: #fff;
border: 5px solid #444;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover ul {
display: block;
}
最佳答案
如果没有 JS 或 jQuery 解决方案，您必须使用 input selectors ，例如 checkbox 来切换它们的 siblings 在其 :checked 事件上。
如下面的代码片段所示。
代码片段
ul {
display: none;
}
input[type="checkbox"]:checked+ul {
display: block;
}<header>
<a href="index.html" id="logo"></a>
<nav>
<input id="menu-icon" type="checkbox" />
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>关于html - 单击以在没有 JS 的移动设备上打开和关闭 Bootstrap 汉堡菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42556303/