1 使用label + input实现元素的隐藏和显示
以下代码点击‘菜单’可以实现li列表的显示和隐藏：
<style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } input:checked ~ ul { display: block; } </style> <body> <label for="menu">菜单</label> <div> <input id="menu" type="checkbox"/> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </div> </body>
~选择器：
element1~element2 选择器 element1 之后出现的所有 element2。两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。
2 hover实现鼠标悬浮时显示其他元素，离开时隐藏这个元素
以下代码实现鼠标放到‘菜单’时显示li列表，离开时隐藏li列表：
<style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } #btn:hover ~ ul { display: block; } </style> <body> <spanid="btn">菜单</span> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </body>
3 button + focus点击指定按钮时显示，点击其他地方时隐藏
以下代码实现点击‘菜单’时显示li列表，点击除‘菜单’以外的地方隐藏li列表：
<style type="text/css"> *{ margin: 0; padding: 0; } input, ul{ display: none; } #btn:focus ~ ul { display: block; } </style> <body> <button id="btn">菜单</button> <ul> <li>1</li> <li>1</li> <li>1</li> </ul> </body>