H5页面中实现文件列表折叠展开需用HTML+CSS+JS：首项恒显并作入口，其余项用max-height过渡隐藏；点击切换类名与文案，动态更新时同步状态和显示逻辑。
在 H5 页面中实现上传文件列表的折叠与展开，核心是控制文件项的显隐状态，并配合简洁的 UI 交互（如箭头图标、文字提示）。不需要依赖复杂框架，纯 HTML + CSS + JavaScript 即可完成。
1. 结构设计：用容器包裹文件列表
每个上传项建议用独立的 避免直接用 这样折叠/展开时有淡出+缩放感，体验更自然。 给首项（或单独的“展开按钮”）绑定点击事件，切换其他项的类名，并更新箭头图标和文字： <script><br>
const fileList = document.getElementById('fileList');<br>
const toggleBtn = fileList.querySelector('.toggle-btn');<br>
const items = fileList.querySelectorAll('.file-item');<br>
<br>
toggleBtn.addEventListener('click', () => {<br>
const isExpanded = toggleBtn.dataset.expanded === 'true';<br>
if (isExpanded) {<br>
items.forEach((item, i) => i > 0 && item.classList.add('file-item-hidden'));<br>
toggleBtn.innerHTML = '展开文件列表 ▶';<br>
toggleBtn.dataset.expanded = 'false';<br>
} else {<br>
items.forEach((item, i) => i > 0 && item.classList.remove('file-item-hidden'));<br>
toggleBtn.innerHTML = '收起文件列表 ▼';<br>
toggleBtn.dataset.expanded = 'true';<br>
}<br>
});<br>
</script> 每次调用
class="file-item-hidden" 初始隐藏data-expanded="false" 存在更易维护2. 样式控制：CSS 控制显隐与过渡
display: none（会丢失动画），推荐用 max-height + overflow: hidden 实现平滑收起效果：3. 交互逻辑：点击切换状态
4. 动态更新适配：新增/删除文件后自动同步
appendFileItem() 或移除某一项后，需重新检查总数并更新首项文案和状态：
data-expanded="false"
