checkbox及css实现点击下拉菜单

面试遇到的问题。用checkbox中的:checked伪类选择器实现。

通过label标签来触发checkbox的unchecked 和checked两种状态;用css普通同胞选择器 ~。另外补充一点,相邻同胞选择器是 +。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
		.column{
			display: none;
		}
		input[type='checkbox']{
			display: none;
		}
		input[type="checkbox"]:checked ~ ul{
			display: block;
		}
	</style>
</head>
<body>
	<div class="container">
		<input type="checkbox" id="check"/>
		<label for="check">标题栏</label>
		<ul class="column">
			<li>栏目1</li>
			<li>栏目2</li>
			<li>栏目3</li>
			<li>栏目4</li>
			<li>栏目5</li>
		</ul>
	</div>
</body>
</html>

 

posted @ 2018-06-04 16:00  若鱼灬  阅读(2263)  评论(0编辑  收藏  举报