使用HTML5的标签可原生实现内容展开收起，通过定义标题，open属性控制默认状态，结合CSS可自定义样式及箭头图标，现代浏览器兼容性良好，旧版浏览器可通过polyfill如details-element实现支持。
HTML5的
标签提供了一种原生的方式来实现内容的展开和收起功能，无需编写额外的JavaScript代码。它通过
标签定义可点击的标题，点击后切换
内部内容的可见性。
解决方案：
直接使用
和
标签即可。例如：
标签的
open属性可以控制初始状态。添加
open属性会默认展开内容。
默认展开
这段内容默认是可见的。
如何自定义Details标签的样式？
可以使用CSS来自定义
和
标签的样式。例如，修改箭头的样式、标题的字体、背景颜色等。
details {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
summary {
font-weight: bold;
cursor: pointer;
padding: 5px;
background-color: #f0f0f0;
}
details[open] summary {
background-color: #e0e0e0;
}这段CSS代码会给
标签添加边框和内边距，给
标签添加粗体字体、鼠标指针样式和背景颜色。当
标签处于展开状态时，
标签的背景颜色会略微改变。
标签的箭头（展开/收起指示器）也是可以自定义的。虽然直接修改伪元素比较困难，但可以通过一些技巧来实现。一种常见的方法是隐藏默认的箭头，然后使用CSS的
::before或
::after伪元素添加自定义的箭头图标。
summary::-webkit-details-marker {
display: none; /* 隐藏 Chrome, Safari 中的默认箭头 */
}
summary::before {
content: '▶'; /* 使用 Unicode 字符作为箭头 */
display: inline-block;
margin-right: 5px;
transition: transform 0.2s ease-in-out;
}
details[open] summary::before {
transform: rotate(90deg); /* 展开时旋转箭头 */
}这段代码首先隐藏了Chrome和Safari浏览器中的默认箭头。然后，使用
::before伪元素添加了一个Unicode字符“▶”作为箭头。通过CSS的
transform: rotate(90deg)，在
标签展开时，箭头会旋转90度，形成展开/收起的视觉效果。
Details标签的兼容性如何？
标签的兼容性在现代浏览器中非常好。几乎所有主流浏览器都支持这个标签。但是，在一些旧版本的浏览器中可能不支持，例如IE浏览器。
如果需要兼容旧版本的浏览器，可以使用polyfill。polyfill是一种代码，它为不支持某些功能的旧浏览器提供相应的实现。对于
标签，有很多现成的polyfill可以使用。
一个常用的polyfill是
details-element。可以通过以下步骤来使用它：
- 引入polyfill的JavaScript和CSS文件。
- 在HTML中使用
标签。
点击展开/收起
这里是隐藏的内容。
引入polyfill后，即使在不支持
标签的浏览器中，也能正常显示和工作。polyfill会自动检测浏览器是否支持
标签，如果不支持，则会使用JavaScript模拟实现相应的功能。
除了
details-element，还有其他的polyfill可供选择，选择哪个取决于具体的需求和偏好。
