<details>，<summary>

基本用法

<details>标签用来折叠内容，浏览器会折叠显示该标签的内容。

  1. <details>
  2. 这是一段解释文本。
  3. </details>

上面的代码在浏览器里面，会折叠起来，显示Details，前面有一个三角形，就像下面这样。

  1. ▶ Details

用户点击这段文本，折叠的文本就会展开，显示详细内容。

  1. ▼ Details
  2. 这是一段解释文本。

再点击一下，展开的文本又会重新折叠起来。

<details>标签的open属性，用于默认打开折叠。

  1. <details open>
  2. 这是一段解释文本。
  3. </details>

上面代码默认打开折叠。

<summary>标签用来定制折叠内容的标题。

  1. <details>
  2.   <summary>这是标题</summary>
  3.   这是一段解释文本。
  4. </details>

上面的代码显示结果如下。

  1. ▶ 这是标题

点击后，展示的效果如下。

  1. ▼ 这是标题
  2. 这是一段解释文本。

通过 CSS 设置summary::-webkit-details-marker，可以改变标题前面的三角箭头。

  1. summary::-webkit-details-marker {
  2.   background: url(https://example.com/foo.svg);
  3.   color: transparent;
  4. }

下面的样式是另一种替换箭头的方法。

  1. summary::-webkit-details-marker {
  2.   display: none;
  3. }
  4. summary:before {
  5.   content: "\2714";
  6.   color: #696f7c;
  7.   margin-right: 5px;
  8. }

JavaScript API

Details元素的open属性返回<details>当前是打开还是关闭。

  1. const details = document.querySelector('details');
  3. if (detail.open === true) {
  4.   // 展开状态
  5. } else {
  6.   // 折叠状态
  7. }

Details元素有一个toggle事件，打开或关闭折叠时，都会触发这个事件。

  1. details.addEventListener('toggle', event => {
  2.   if (details.open) {
  3.     /* 展开状况 */
  4.   } else {
  5.     /* 折叠状态 */
  6.   }
  7. });