這是補充HTML5基礎知識的系列內容，其他為：
- 一、HTML5-- 新的結構元素
- 二、HTML5-- figure、time、details、mark
- 三、HTML5-- details活學活用
- 四、HTML5-- 現存元素的變化
- 五、HTML5 -- Web表單
在上一篇隨筆讀書筆記：《HTML5開發手冊》--figure、time、details、mark中，介紹了語義化標簽details，如果還不知道其用法的可以點進去看一眼，本次就特地實戰一下。
在HTML5之前，想通過純CSS實現手風琴效果一般是借助checked或者target來完成，不過，HTML5提供了details元素，我們可以光明正大的拿來做手風琴了。
現在根據這篇文章The details and summary elements來實際操作一下。
效果1：MAC版顯示簡介
用過mac的同學對這個界面一定很熟悉，因為這個界面和我們今天要說的details有很多相近的地方，首先，其有折疊效果，用戶可以自己選擇打開或關閉哪一個，其次，當我們直接打開的時候，默認會有幾個標簽是打開的，有一些是關閉的，而這些我們的details都能實現。
代碼地址：https://github.com/Gavin-YYC/html5demos/blob/master/html5/details-mac.html
效果預覽
代碼結構
<details open>
<summary>通用: </summary>
<dl>
<dt>種類:</dt><dd>便攜文稿格式 (PDF)</dd>
<dt>大小:</dt><dd>121,765,394 字節（磁盤上的 121.8 MB）</dd>
<dt>位置:</dt><dd>/Users/yangyoucun/Desktop</dd>
<dt>創建時間:</dt><dd>2013年7月17日 星期三 11:37</dd>
<dt>修改時間: </dt><dd>2013年7月17日 星期三 11:37</dd>
</dl>
</details>
<details>
<summary>更多信息: </summary>
<dl>
<dt>版本: </dt><dd>1.5</dd>
<dt>頁數: </dt><dd>722</dd>
<dt>分辨率: </dt><dd>631 × 835</dd>
<dt>安全性: </dt><dd>None</dd>
<dt>編碼軟件: </dt><dd>FreePic2Pdf - 1.26</dd>
<dt>來源: </dt><dd>jiu的MacBook Pro</dd>
</dl>
</details>
<details>
<summary>名稱與拓展名: </summary>
<input type="text" name="" value="HTTP權威指南.pdf">
</details>
<details>
<summary>注釋: </summary>
<textarea name="name"></textarea>
</details>
<details>
<summary>打開方式: </summary>
<select>
<option value="">預覽（默認）</option>
</select>
</details>
<details open>
<summary>預覽: </summary>
<img src="temp.png" alt="">
</details>
可以看到，上面代碼HTML代碼就已經可以實現這種折疊效果了，稍微添加了CSS就可以獲得不一樣的效果，完全不用去模擬實現。
另外，在我的代碼中，我使用了table來展示上面的“更多信息”列表與“通用”列表，其實這並不符合語義，所以，在這里我使用了dl來表示描述列表，即該列表的形式為'name-value'，並且其是對summary的項目描述，一組元信息，所以使用dl更加符合語義。
效果2：手風琴效果
這個效果是最為常見，通過details短短幾行代碼就可以實現該功能。
代碼地址：https://github.com/Gavin-YYC/html5demos/blob/master/html5/details-accordion.html
效果預覽
代碼結構
<section>
<h1>Question List</h1>
<details>
<summary>Question 1</summary>
<p>answeransweransweransweransweransweranswerans</p>
</details>
<details open>
<summary>Question 2</summary>
<p>answeransweransweransweransweransweranswerawer</p>
</details>
<details>
<summary>Question 3</summary>
<p>answeransweransweransweransweransweransweranswerswer</p>
</details>
<details>
<summary>Question 4</summary>
<p>answeransweransweransweransweransweransansweranswer</p>
</details>
</section>
我們的折疊面板結構非常清晰，沒有多余的元素節點，並且也沒有任何的JavaScript代碼，只需這些，我們的手風琴效果就實現了。
效果3：典型的文件程序卸載界面
這也是一個常用的應用場景，在安裝或卸載程序的過程中，我們一般展示給用戶具體的進度信息，對於細節一般隱藏起來，該場景便可以通過details來完成
下面看下截圖：
樣式優化規則：
對summary文字前面默認icon（▶）的修飾通過如下方式完成：
// 隱藏三角符號
details summary::-webkit-details-marker {
display: none;
}
為了更好的體驗，還有一些樣式需要處理：
summary {
outline: none; // 1、去掉點擊時的外邊框
user-select: none; // 2、不能點擊選中
cursor: pointer; // 3、鼠標經過效果
}
有時summary的狀態和details是否有open屬性有關：
details[open] summary {
// 展開時的summary樣式
color: red;
background-color: blue;
}
添加過渡與動畫
在展開/收縮的過程中，我們依然可以制作一些有意思的動畫，注意，這里的動畫主要是指內容區的動畫。
HTML結構如下：
<details>
<summary>First</summary>
<div>
<p>Set the animation to run when details open</p>
</div>
</details>
css部分如下：
@keyframes slideDown {
0% {
opacity: 0;
height: 0;
}
100% {
opacity: 1;
height: 20px;
}
}
details[open] > div {
animation: slideDown 1s linear both;
overflow:hidden;
}
總結
在實際項目中，有太多的場景是需要用戶來操作顯示/隱藏相關內容，這也是提高用戶體驗的一個過程，展示重點內容，把主動權交給用戶。
對於這樣的場景，details都可以發揮重要的內容。