在上一篇隨筆讀書筆記:《HTML5開發(fā)手冊》--figure、time、details、mark中,介紹了語義化標(biāo)簽details
,如果還不知道其用法的可以點(diǎn)進(jìn)去看一眼,本次就特地實(shí)戰(zhàn)一下。
在HTML5之前,想通過純CSS實(shí)現(xiàn)手風(fēng)琴效果一般是借助checked
或者target
來完成,不過,HTML5提供了details
元素,我們可以光明正大的拿來做手風(fēng)琴了。
現(xiàn)在根據(jù)這篇文章The details and summary elements來實(shí)際操作一下。