H5页面中实现文件列表折叠展开需用HTML+CSS+JS：首项恒显并作入口，其余项用max-height过渡隐藏；点击切换类名与文案，动态更新时同步状态和显示逻辑。
在 H5 页面中实现上传文件列表的折叠与展开，核心是控制文件项的显隐状态，并配合简洁的 UI 交互（如箭头图标、文字提示）。不需要依赖复杂框架，纯 HTML + CSS + JavaScript 即可完成。
1. 结构设计：用容器包裹文件列表
每个上传项建议用独立的 <div class="file-item"> 包裹，外层加一个统一的列表容器（如 <code><div id="fileList">），便于批量操作。折叠时隐藏“非首项”，展开时全部显示。
<ul>
<li>首项默认始终可见，作为“折叠入口”（例如显示“已选 3 个文件 ▼”）</li>
<li>其余文件项添加 <code>class="file-item-hidden" 初始隐藏
data-expanded="false" 存在更易维护2. 样式控制：CSS 控制显隐与过渡
避免直接用 display: none（会丢失动画），推荐用 max-height + overflow: hidden 实现平滑收起效果：
这样折叠/展开时有淡出+缩放感，体验更自然。
3. 交互逻辑：点击切换状态
给首项（或单独的“展开按钮”）绑定点击事件，切换其他项的类名，并更新箭头图标和文字：
<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>
4. 动态更新适配：新增/删除文件后自动同步
每次调用 appendFileItem() 或移除某一项后，需重新检查总数并更新首项文案和状态：
- 若只有 1 个文件，隐藏“展开按钮”，不启用折叠
- 若新增后总数 ≥ 2，确保首项显示“已选 X 个文件 ▶”，且
data-expanded="false" - 删除至只剩 1 个时，自动收起并隐藏其余项（如有）
