内容折叠功能在现代网页设计中非常常见，比如FAQ问答列表、商品详情参数、侧边栏菜单等场景都会用到。点击标题展开内容，再点击收起，这种交互既节省了页面空间，又让信息层次更加清晰。实现折叠功能其实并不复杂，下面介绍几种常见方案，从最简单的原生标签到自定义样式都有覆盖。
方案一：使用原生的details和summary标签
HTML5提供了专门的<details>和<summary>标签来实现折叠功能，这是最推荐的方式，因为它不需要任何JavaScript代码，浏览器原生支持展开和收起的交互行为。<summary>标签定义折叠面板的标题，<details>标签内部的其他内容则在默认情况下被隐藏，用户点击标题后才会显示出来。
基本用法非常简单，看下面的代码就能明白：
<details> <summary>点击查看常见问题</summary> <p>这里是折叠起来的内容，用户点击标题后才会显示。</p> <p>可以放置任意HTML内容，包括图片、列表、表格等。</p> </details>
如果希望面板默认处于展开状态，只需在<details>标签上添加open属性即可。这个属性是一个布尔属性，写上就代表默认展开：
<details open> <summary>默认展开的面板</summary> <p>这段内容在页面加载时就会直接显示出来。</p> </details>
这种方式的优点是零依赖、语义化好、对搜索引擎友好，而且对无障碍访问的支持也很到位，键盘和屏幕阅读器都能正常操作。缺点是旧版本浏览器（如IE11）不支持，并且默认样式比较朴素，展开收起过程没有平滑动画。不过这两个问题都可以通过CSS来解决，比如用::marker伪元素或者自定义一个小三角图标来美化标题。
方案二：纯CSS实现折叠面板
如果需要兼容更多浏览器，或者想在同一个面板中实现互斥展开的效果，可以借助复选框或单选按钮来实现纯CSS折叠。核心思路是利用label标签关联隐藏的input控件，再通过:checked伪类选择器控制内容的显示与隐藏。
先看复选框版本，复选框允许多个面板同时展开，适合FAQ这种互相独立的场景：
<style>
.collapse-input { display: none; }
.collapse-content { display: none; }
.collapse-input:checked + label + .collapse-content {
display: block;
}
.collapse-title {
display: block;
padding: 10px;
background: #f0f0f0;
cursor: pointer;
}
</style>
<div>
<input type="checkbox" id="panel1" class="collapse-input">
<label for="panel1" class="collapse-title">点击展开或收起</label>
<div class="collapse-content">
<p>这是通过纯CSS控制显示的折叠内容。</p>
</div>
</div>如果把手风琴效果（同时只能展开一个面板）作为需求，把type="checkbox"换成type="radio"，并给所有单选按钮设置相同的name属性即可。选中其中一个时，浏览器会自动取消其他的选择，内容随之收起，天然形成了互斥效果。
纯CSS方案的优点是兼容性好、不依赖JavaScript，而且结构可控。缺点也有明显几点：一是HTML结构被固定死了，input、label、内容元素三者的顺序和兄弟关系不能乱，否则选择器失效；二是radio版本一旦选中就无法全部收起；三是收起时的动画处理比较麻烦，因为display属性的变化无法参与CSS过渡动画，如果想要平滑效果还得改用max-height或者grid-template-rows来做。
方案三：结合JavaScript实现动画和高级控制
当对交互有更高要求时，比如需要展开收起的过渡动画、需要监听展开事件、或者折叠内容高度不固定，JavaScript方案会灵活得多。推荐监听<details>标签的toggle事件，再配合CSS实现高度过渡动画：
<style>
.panel-content {
overflow: hidden;
max-height: 0;
transition: max-height 0.35s ease;
}
.panel.open .panel-content {
max-height: 500px;
}
</style>
<script>
function togglePanel(id) {
var panel = document.getElementById(id);
panel.classList.toggle('open');
}
</script>
<div class="panel" id="panelA">
<div class="collapse-title" onclick="togglePanel('panelA')">
点击展开
</div>
<div class="panel-content">
<p>这段内容带有平滑的展开动画效果。</p>
</div>
</div>上面代码的思路是给内容容器设置max-height为0并隐藏溢出，展开时通过切换class让max-height变大，从而触发CSS过渡动画。需要注意的是max-height的值要设置得比实际内容高度大一些，但也不能过大，否则动画速度会显得不自然。如果要追求更精细的效果，可以在JavaScript中动态读取scrollHeight再精确设置高度，动画会更顺滑。
JavaScript方案还能轻松实现一些高级功能，比如点击一个按钮展开全部或收起全部、根据URL参数决定初始展开的面板、在展开时发送统计请求等。对于内容较多的大型文档页面，这些功能非常实用。
三种方案如何选择
简单总结一下选型建议。如果只是做简单的FAQ或者说明性内容的折叠，直接用<details>加<summary>，代码最少，维护成本最低；如果项目需要兼容很老的浏览器，或者设计师对HTML结构有特殊要求，可以考虑纯CSS方案；如果需要动画、互斥展开、事件监听等丰富交互，那就上JavaScript。
实际项目中也可以混合使用，比如以<details>为基础结构，再用JavaScript增强动画和监听事件，这样即使脚本加载失败，折叠功能依然可用，是一种比较稳妥的渐进增强思路。无论选择哪种方案，都要记得测试键盘操作和移动端触控体验，确保折叠按钮的可点击区域足够大，这样用户用起来才顺手。