HTML视频列表怎么折叠展开？影音展示技巧-html教程-PHP中文网

不适合视频列表，因其语义限制（须为首子元素）、无滑动动画、难实现手风琴效果、懒加载性能差；实用方案是max-height+JS动态计算高度，并注意渲染稳定与可访问性。

html视频列表怎么折叠展开？影音展示技巧

直接用

+ 就能实现视频列表的折叠展开，语义正确、无需 JS、键盘可访问——但前提是列表结构简单、内容静态、且不强求滑动动画。

为什么不用做视频列表？

它确实能工作，但视频类内容常踩几个硬伤：

必须是的第一个子元素，而视频列表通常需要在标题旁放播放按钮、时长、清晰度标签等交互控件，强行塞进容易破坏语义或触发 Safari 兼容问题
原生不支持 max-height 过渡，视频缩略图+描述块高度差异大，硬切 display 会跳变
多个视频项默认互不干扰，但用户常期望“手风琴效果”（点开一个，其他自动收起），这必须监听 toggle 事件并手动操作 DOM
若视频是懒加载或含标签，展开瞬间可能触发多段视频预加载，影响性能

`max-height` + JS 切换类名才是视频列表的实用方案

核心是绕过 height:auto 无法过渡的限制，用 JS 动态读取真实高度再赋值。适用于带缩略图、标题、时长、操作按钮的完整视频卡片。

HTML 结构保持语义清晰：

<div class="video-item">
<button class="video-toggle">…</button><div class="video-content">
<video></video><p>描述</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="overflowclass">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
													<p class="overflowclass">使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>
</div>

CSS 中 .video-content 初始设 max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
JS 点击时先移除 open 类，强制重排（如读 offsetHeight），再设 max-height 为 element.scrollHeight；收起时设回 0，过渡结束后清空行内 max-height 避免后续高度误判
注意：若标签在折叠内容里，建议加 preload="metadata" 或监听 loadedmetadata 后再触发展开，防止 scrollHeight 计算不准

如何避免视频列表折叠时“抖动”或“错位”？

抖动本质是 CSS 重排/重绘不稳定，尤其在含图片、视频、字体加载的场景下：

给 .video-content 加 contain: layout style paint;，隔离渲染影响范围
缩略图统一用固定宽高比容器（如 aspect-ratio: 16/9），避免加载后布局偏移导致 scrollHeight 变化
不要依赖 clientHeight —— 它可能返回 0（内容未渲染完）；优先用 scrollHeight，并在 requestAnimationFrame 回调中读取
如果列表项有阴影、边框或 transform，确保父容器没触发层叠上下文冲突，否则 overflow: hidden 可能失效