HTML5每日一練之details展開收縮標簽的應用

details標簽的出現，為我們帶來了更好的用戶體驗，不必為這種收縮展開的效果再編寫JS來實現。

注：目前僅Chrome支持此標簽。

details有一個新增加的子標簽——summary，當鼠標點擊summary標簽中的內容文字時，details標簽中的其他所有元素將會展開或收縮。

detalis標簽：

案例1：

HTML5每日一練之details展開收縮標簽的應用

HTML5|CSS3|論壇 | 前端開發網(W3Cfuns.com)!

HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇

如果details中不存在summary標簽會怎樣呢，其實當details元素內沒有summary標簽的時候，瀏覽器在解析的時候會提供一個默認的文字，比如“查看詳細”諸如此類的本地化文字，瀏覽器同樣再會提供一個諸如上下箭頭之類的圖標。比如下面的案例2就是一個不存在summary子標簽的例子。

案例2：

HTML5每日一練之details展開收縮標簽的應用

HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇

有的時候，我們需要detalis中的內容默認為展開狀態怎么辦？

其實HTML5也已經為我們想到了，如果有著方面的需求，我們只需要加入一個屬性即可，如案例3。

Open屬性：

將案例1的代碼修改后如下：

案例3：

HTML5每日一練之details展開收縮標簽的應用

HTML5|CSS3|論壇 | 前端開發網(W3Cfuns.com)!

HTML5論壇,CSS3論壇,CSS論壇,WEB前端開發論壇,教程資源完全免費的CSS論壇，打造最好的HTML5/CSS3論壇

以上就是HTML5每日一練之details展開收縮標簽的應用的內容，更多相關內容請關注PHP中文網(www.php.cn)！

相關文章：

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的php 收缩栏,HTML5每日一练之details展开收缩标签的应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。