折叠标签

`<details>`，`<summary>`

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

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

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

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

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

details.addEventListener('toggle', event => {
  if (details.open) {
    /* 展开状况 */
  } else {
    /* 折叠状态 */
  }
});