纯HTML无法实现播放列表折叠展开，因audio/video无状态管理能力，必须用JS控制DOM显隐与CSS过渡，并避免自动播放限制及多实例冲突。
纯 HTML 无法直接控制多媒体播放列表的折叠展开逻辑——audio 和 video 元素本身不提供列表状态管理能力，所有“折叠/展开”行为必须靠 JS 控制 DOM 显隐 + CSS 过渡，且需规避自动播放限制和多实例冲突。
为什么不能用 details/summary 直接套播放器
虽然 details 原生支持折叠，但直接包裹 audio 或 video 会出问题：
-
details展开时，内部audio的controls可能因父容器重排而错位或失效 - 多个
details并列时，无法统一控制“只展开当前项”，互斥逻辑仍需 JS 监听toggle事件并手动关闭其他 -
video在details[open]中首次加载可能触发NotAllowedError（尤其 Safari），因为展开动作不被视为用户手势
正确结构：单播放器 + 列表项独立折叠
核心是分离“播放控制”和“列表展示”：
- 只保留一个
<audio id="main-audio"></audio>或<video id="main-video"></video>，所有播放操作都指向它 - 列表项用
<div class="track"> 或 <code><li class="playlist-item">包裹元数据，每个带data-src、data-title - 每项内放一个可折叠区域：
<div class="track-details"> <p>详细描述</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a> <p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>，不放播放器 - 折叠/展开仅作用于该描述区域，不影响主播放器
示例关键结构：
<ul id="playlist">
<li class="playlist-item">
<button type="button" class="play-btn" >▶ 晴天</button>
<button type="button" class="toggle-desc">ⓘ 详情</button>
<div class="track-details"><p>周杰伦 2003 年专辑《叶惠美》主打曲...</p></div>
</li>
</ul>
JS 控制折叠 + 避免常见报错
监听按钮点击，切换 .track-details 的显隐类，并确保动画平滑：
- 不要用
display: none硬切——改用max-height+transition，否则 height:auto 无法过渡 - 给
.track-details设初始max-height: 0、overflow: hidden，展开时设为足够大的值（如max-height: 200px） - 点击播放按钮时，先调
audioEl.load()再audioEl.play()；若失败，捕获NotAllowedError并提示用户需手动点击一次页面 - 避免在
DOMContentLoaded里自动调play()——浏览器会拦截，必须由用户真实点击触发
CSS 动画兼容性要点
折叠动画要兼顾现代与旧版浏览器：
- Chrome/Firefox/Safari 支持
max-height过渡，但 Safari 对max-height: 0 → auto不生效，必须写死展开值（如max-height: 240px） - IE11 不支持
max-height过渡，降级为opacity+visibility切换（无高度动画，但功能完整） - 不要对
audio或video元素本身加transform或scale——可能破坏 controls UI 渲染 - 如果要用箭头旋转指示状态，用
transform: rotate(90deg)而非 Unicode 替换，避免字体缩放失真
最易被忽略的是：播放列表的“折叠”从来不是折叠播放器，而是折叠元数据区域；真正的播放控制永远应集中到单一实例，否则音频争抢、状态不同步、内存泄漏全都会立刻出现。
