利用input和伪类来进行标签的显示和隐藏

219 阅读1分钟

Checkbox来储存状态

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
	.txt{padding: 20px;}
	#myCheck{display: none;}
	.menu{cursor: pointer;}
	.tt{display: none;width: 300px;min-height: 100px;background-color: #ccc;padding: 20px;}
	#myCheck:checked ~ .tt{display: block;}
</style>
</head>
<body>
<label for="myCheck" class="menu">菜单</label>
<input id="myCheck" type="checkbox" name="">
<div class="txt">
	<p>利用Checkbox来储存状态 </p>
	<p>#myCheck:checked ~ .tt  // ~ 记得要加</p>
</div>
<div class='tt'>内容</div>
</body>
</html>