• 作者：陳大魚頭
• github：KRISACHAN

眾所周知， HTML5 已經(jīng)出了很多年，其迭代版本都出到了 HTML5.3 。這其中有趣的 API 跟 標簽有許多，這里就簡單介紹兩個：<details>  跟 <summary>  。

定義

<details> 就是一個展示附加內(nèi)容的原生組件。

而 <summary> 則是承載 <details> 附加內(nèi)容的標簽。

demo

具體表現(xiàn)是這樣：

代碼如下：

<h1>Copying "Really Achieving Your Childhood Dreams"</h1>
<details>
  <summary>Copying... <progress max="375505392" value="97543282"></progress> 25%</summary>
  <dl>
    <dt>Transfer rate:</dt> <dd>452KB/s</dd>
    <dt>Local filename:</dt> <dd>/home/rpausch/raycd.m4v</dd>
    <dt>Remote filename:</dt> <dd>/var/www/lectures/raycd.m4v</dd>
    <dt>Duration:</dt> <dd>01:16:27</dd>
    <dt>Color profile:</dt> <dd>SD (6-1-6)</dd>
    <dt>Dimensions:</dt> <dd>320×240</dd>
  </dl>
</details>

我們可以通過給 <details> 添加 open 屬性來控制默認狀態(tài)，例如：

代碼如下：

<details open>
  ...
</details>

JS 控制

我們可以通過 toggle 事件來進行控制，例子如下：

代碼如下：

details.addEventListener("toggle", event => {
 h1.innerText = details.open ? 'opened status' : 'closed status';
});

體驗優(yōu)化

眾所周知，原生標簽的樣式一般都比較丑，而且還不統(tǒng)一（所以一般沒什么人用）。

不過還好，上述兩個標簽的基本樣式的都是可以改的。

效果如下：

體驗地址如下：

https://codepen.io/krischan77/pen/Rwomgzp

代碼如下：

<style>
  html,
  bodym
  details,
  summary {
    margin: 0;
    padding: 0
  }

  html,
  body {
    color: #fff;
  }

  details,
  summary {
    outline: none;
  }

  ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 35px;
  }

  li {
    cursor: pointer;
    margin: 10px 0;
  }

  section,
  details {
    width: 300px;
    margin: 50px auto 0;
    cursor: pointer;
    background:  rgba(0,0,0,.85);
  }

  summary {
    padding: 16px;
    display: block;
    background: rgba(0,0,0,.65);
    padding-left: 35px;
    position: relative;
    cursor: pointer;
  }

  summary::before {
    content: '';
    border-width: .4rem;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 21px;
    left: 16px;
    transform: rotate(0);
    transform-origin: 3.2px 50%;
    transition: .25s transform ease;
  }

  details[open] > summary::before {
    transform: rotate(90deg);
  }

  details + ul {
    max-height: 0;
    transition: max-height .5s;
    overflow: hidden;
  }
  details[open] + ul {
    max-height: 260px;
  }
</style>
<section id="section">
  <details id="details">
    <summary id="summary">水果列表</summary>
  </details>    
  <ul>
    <li>百事可樂</li>
    <li>維他奶</li>
    <li>礦泉水</li>
    <li>蘇打水</li>
    <li>冰紅茶</li>
  </ul> 
</section>

配合簡單的過渡跟選擇器，就能夠輕松實現(xiàn)折疊菜單功能，非常方便。

兼容性

還行，雖然 IE 還是全軍覆沒，但是在移動端還是可以很香地使用的

后記

如果你喜歡探討技術(shù)，或者對本文有任何的意見或建議，非常歡迎加魚頭微信好友一起探討，當然，魚頭也非常希望能跟你一起聊生活，聊愛好，談天說地。魚頭的微信號是：krisChans95 也可以掃碼關(guān)注公眾號，訂閱更多精彩內(nèi)容。公眾號窗口回復(fù)『 前端資料 』，即可獲取約 200M 前端面試資料，不要錯過。