CSS+JavaScript实现图片列表折叠展开需用max-height+overflow:hidden做动画，避免display:none中断懒加载；details/summary是语义化原生方案但无动画；须处理懒加载冲突、触控热区及无障碍支持。
用 CSS + JavaScript 实现图片列表的折叠展开
纯 HTML 无法实现折叠展开，必须配合 CSS 控制显隐 + JavaScript 响应点击。核心思路是：初始隐藏部分 <img alt="HTML如何让图片列表折叠展开？相册收起方法" >，点击按钮切换容器的 max-height 或元素的 display/visibility 状态。
推荐用 max-height + overflow: hidden 做过渡动画，比单纯切 display 更平滑，也避免布局跳动。
常见错误现象：display: none 切换导致图片加载被中断（尤其懒加载图片）；height: 0 无法触发 transition（需用 max-height）；未给父容器设 overflow: hidden 导致内容溢出。
- 确保图片容器有明确 class，例如
gallery-list，便于 JS 操作 - 折叠时保留前 N 张图可见，其余加到一个
<div class="gallery-hidden"> 中<li>按钮文案动态更新：用 <code>textContent = isExpanded ? '收起' : '展开' - 若图片带
loading="lazy"，折叠后再次展开时需手动触发重载或改用loading="eager"避免白屏
用 details + summary 快速实现（无动画但语义强）
HTML5 原生标签 <details></details> 是最轻量的方案，无需 JS，支持键盘操作和屏幕阅读器，适合对动效无要求的相册摘要场景。
立即学习“前端免费学习笔记（深入）”；
缺点是不支持自定义过渡动画，且 Safari 旧版本对 details 的样式控制较弱（比如不能直接给 summary 加 margin 后再用 ::marker 调整图标）。
示例结构：
<details>
<summary>查看全部 24 张照片</summary>
<div class="gallery-list">
<img src="1.jpg" alt="HTML如何让图片列表折叠展开？相册收起方法" >
<img src="2.jpg" alt="HTML如何让图片列表折叠展开？相册收起方法" >
<!-- ... -->
</div>
</details>- 默认收起，点击
<summary></summary>展开——行为由浏览器原生实现 - 可通过
details[open]CSS 伪类控制展开后的样式 - 若要默认展开，加
open属性：<details open></details> - 不建议在
<summary></summary>里放复杂 DOM（如按钮、图标 SVG），部分 Android WebView 渲染异常
处理图片懒加载与折叠状态冲突
当使用 loading="lazy" 时，折叠后图片脱离视口，再展开可能不触发加载，出现空白占位。
根本原因不是“懒加载失效”，而是折叠容器高度为 0 后，内部图片始终不在滚动可视区域内，IntersectionObserver 不触发。
- 方案一：折叠时移除
loading="lazy"，展开时补回（适用于图片数少于 20） - 方案二：监听
details[open]变化，用img.decode()主动解码（兼容性需查 caniuse） - 方案三：放弃懒加载，改用 CSS
contain: layout style提升列表容器性能，实测比反复 toggleloading更稳定 - 避免用
visibility: hidden折叠——它不触发重排，但图片仍算“在视口内”，懒加载逻辑混乱
移动端点击区域与触摸反馈优化
相册常用于手机浏览，但小图列表 + 折叠按钮容易误点或无反馈，用户不知道是否点中。
关键不是加个 :active 背景色，而是让交互可感知：按钮要有足够点击热区（至少 44×44px），展开/收起过程要有视觉锚点（比如箭头旋转）。
- 用
transform: rotate(180deg)动画控制箭头图标方向，比 JS 切 class 更顺滑 - 给按钮加
touch-action: manipulation减少 iOS 300ms 延迟 - 避免在
<summary></summary>内嵌套<button></button>——会触发双重事件，且语义重复 - 如果用自定义按钮，务必加
role="button"和tabindex="0"，否则键盘用户无法聚焦
折叠展开本身不难，难的是图片加载时机、触控反馈、无障碍支持这三件事凑一起时，任意一个疏忽都会让用户卡在“点了没反应”上。
