編碼的世界 / 優質文選 / 生涯

css實現列表展開與收起

2021年10月23日
-

列表的展開與收起
大家先開看看這張圖：

很多人會說，褲子都脫了，你給我看這個？不就是js點擊效果麼…
NO!!!
checkbox
input標簽大家經常用到，form表單中用的心累有木有…可一般情況下，咱們的input標簽中，type字段都是text、submit居多。只有在網站注冊是遇到惡霸條款（已閱讀以上協議，並同意遵守…）時，才會使用這麼一個雞肋的小方框功能。
但如果使用checkbox的checked默認值記錄功能，在配合label標簽的for指向它，即可用css完成列表的展開收起。

其實上面的圖，代碼很簡單，不妨看看：
我們通過checkbox的標記值，對tag-list進行display的特殊處理，完成了通過css控制列表的展開與收起，當然這個無樣式的效果看起來有些糙，但圖糙內容不糙啊… 上圖代碼如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <style>
 * {
 margin: 0px ;
 padding: 0px;
 width: 100px;
 }
 #menu-checkbox{
 display: none;
 }
 #menu-checkbox:checked ~ .tag-list{
 display: none;
 }
 li{
 float: left;
 margin: 2px;
 list-style-type: none;
 }
 a {
 text-decoration: none;
 }
 </style>




 </head>
 <body>
 <label for="menu-checkbox">主菜單</label>
 <input id="menu-checkbox" type="checkbox" name="" value="">
 <div class="tag-list">
 <ul>
 <li><a href="#">首頁</a> </li>
 <li><a href="#">正文</a> </li>
 <li><a href="#">設置</a> </li>
 </ul>
 </div>
 </body>
</html>

編碼的世界 / 優質文選 / 生涯

css實現列表展開與收起

熱門文章