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>