html 表單折疊實作,css實作清單展開與收起

清單的展開與收起

大家先開看看這張圖：

css實作清單展開與收起.gif

很多人會說，褲子都脫了，你給我看這個？不就是js點選效果麼....

NO!!!

checkbox

input标簽大家經常用到，form表單用的心累....可一般咱們的input标簽中，type字段都是text、submit居多。隻有到惡霸條款(已閱讀以上協定，并同意...)時，才會使用。

但如果使用checkbox配合label标簽的for，即可用css完成清單的展開收起。

上面的圖檔代碼如下：

* {

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;

}

主菜單

• 首頁
• 正文
• 設定

不積跬步無以至千裡，不積小流無以成江海.....