详情

@<details>
. <details>详情|细节标签,配合摘要标签 <summary> 一起使用,构建折叠面板
. 内容可以使用任意标签呈现
. 内容可以展开或折叠起来;默认情况下,是折叠状态
. 可以指定属性 open 调整为默认展开状态
. 可以实现多级导航
. 更多信息,请访问MDN - <details>CSS实体
[]基本使用
title
  • item1
  • item2
  • item3
  • item4
<details open>
  <summary>title</summary>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
  </ul>
</details>      
[]定制样式
. 自定义标记
. 具备层级、缩进
title
  • item1
  • item2
  • item3
  • item4
.indent summary::marker {
  content: '+ ';
}

.indent li {
  display: flex;
  align-items: center;
}

.indent li::before {
  content: '';
  width: 2em;
  height: 1px;
  background-color: #bdc3c7;
}

.indent[open] summary::marker {
  content: '- ';
}

.indent[open] ul {
  border-left: 1px solid #bdc3c7;
}