利用HTML全局属性data与CSS属性过渡实现零JS手风琴-html教程-PHP中文网

data属性本身不触发css过渡，需配合属性选择器（如[data-open="true"]）控制max-height和opacity实现手风琴效果；因height: auto不可过渡，故用足够大的max-height值（如480px）替代，并始终配合overflow: hidden防止溢出。

利用html全局属性data与css属性过渡实现零js手风琴

data属性如何触发CSS过渡

手风琴效果本质是高度从0变到内容实际高度，但CSS无法直接对height: auto做过渡。必须用data-open这类自定义属性标记状态，再靠CSS选择器匹配来切换样式。浏览器会把data-open="true"和data-open="false"当作两个不同状态，配合transition就能驱动变化。

关键点在于：不能依赖:hover或:focus——它们不持久；必须用[data-open="true"]这种显式属性选择器，才能稳定控制开合状态。

为什么必须用max-height代替height做过渡

height设为auto时无法过渡，设为固定值又不适应内容变化。折中方案是用max-height：初始设为0，展开时设为一个足够大的值（比如600px），让内容在限制内自然撑开。

常见错误是max-height设得太小，导致内容被截断；或者设得过大（如9999px），导致动画时间拉长、失去节奏感。建议按页面最大可能内容预估，通常400px–600px够用。

无序列表：

max-height: 0 → max-height: 480px 是合理区间
过渡需同时写 max-height 和 opacity，否则视觉突兀
关闭时记得加 overflow: hidden，防止内容溢出动画过程

纯CSS如何响应点击并切换data属性

CSS本身不能修改data-属性，所以必须借助<input type="checkbox">的:checked伪类 + label模拟按钮。这是零JS手风琴唯一可行的触发路径。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

结构上，每个手风琴项需要：input（隐藏）、label（作为标题点击区）、div（内容区）。通过for/id关联，点击label就切换input的选中状态，再用input:checked ~ .content控制后续元素。

示例关键片段：

<input type="checkbox" id="accordion-1" hidden><label for="accordion-1">标题</label>
<div class="content">内容...</div>

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease;
}
#accordion-1:checked ~ .content {
  max-height: 480px;
  opacity: 1;
}