checkbox及css實現點擊下拉菜單

時間 2019-12-10

原文原文鏈接

面試遇到的問題。用checkbox中的:checked僞類選擇器實現。css

經過label標籤來觸發checkbox的unchecked 和checked兩種狀態；用css普通同胞選擇器 ~。另外補充一點，相鄰同胞選擇器是 +。html

<!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>

相關標籤/搜索