checkbox及css實現點選下拉選單

weixin_30639719發表於2020-04-05
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>

 

轉載於:https://www.cnblogs.com/lovemomo/p/9133798.html

相關文章