通过为容器添加/移除 `active` 类并配合 css 过渡，可实现单击按钮切换内容显示状态，无需悬停或长按，真正达成“按一次展开、再按一次收起”的交互效果。
在现代网页开发中，仅靠纯 CSS 很难实现持久化点击状态切换（如按钮按下后保持激活态，再次点击才释放），因为 :active 伪类仅在鼠标按下瞬间生效，:hover 依赖光标位置，而 :checked 又需配合表单控件（如隐藏的 checkbox）。因此，最可靠、简洁且语义清晰的方案是：用 JavaScript 控制 class 切换 + CSS 基于 class 定义状态样式。
✅ 核心思路
- 为需要控制显隐的容器（如 #hidden-content）绑定一个自定义状态类（例如 .active）；
- 点击触发元素（.bottom-arrow）时，使用 element.classList.toggle('active') 切换该类；
- 在 CSS 中，将原本依赖 #hidden-content:active 的样式规则，改为基于 #hidden-content.active 编写；
- 所有动画（如 max-height 过渡）自然响应 class 的增删，实现平滑展开/收起。
? 实现步骤
1. HTML 结构（保持简洁，无需修改表单逻辑）
确保触发元素是可点击的（已设 cursor: pointer），并移除无实际作用的 for="trigger"（因无对应 <input id="trigger">）：
<div id="hidden-content">
<label class="bottom-arrow"></label> <!-- 纯视觉按钮，非表单控件 -->
<div id="list">
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
<div>hidden text</div>
</div>
</div>2. JavaScript（置于 </body> 前或 DOMContentLoaded 中）
<script>
document.addEventListener('DOMContentLoaded', function() {
const trigger = document.querySelector('.bottom-arrow');
const hiddenContent = document.getElementById('hidden-content');
if (trigger && hiddenContent) {
trigger.addEventListener('click', function() {
hiddenContent.classList.toggle('active');
});
}
});
</script>✅ 优势：使用 DOMContentLoaded 确保 DOM 加载完成后再绑定事件；添加空值检查提升健壮性。
3. 关键 CSS 修改（重点！）
将原 #hidden-content:active 规则全部替换为 #hidden-content.active：
立即学习“Java免费学习笔记（深入）”；
/* 隐藏状态（默认） */
#hidden-content #list {
max-height: 0;
overflow: hidden;
transition: max-height 0.15s ease-out;
}
/* 展开状态（通过 JS 添加 .active 类触发） */
#hidden-content.active #list {
max-height: 500px; /* 建议设为足够容纳所有内容的值，或改用 height: auto + padding-top/bottom 过渡（需 JS 测量） */
transition: max-height 0.25s ease-in;
}
#hidden-content.active .bottom-arrow {
position: absolute;
bottom: -25px;
transition: bottom 0.25s ease-out;
}⚠️ 注意事项：max-height 过渡无法从 0 到 auto，因此需预估一个安全的最大高度（如 500px）。若内容高度动态变化，推荐改用 height: auto + padding + opacity 组合过渡，或借助 transform: scaleY() 实现更可靠的动画。.bottom-arrow 使用 label 元素虽可点击，但语义上更推荐改用 <button type="button" class="bottom-arrow">，并移除 for 属性，提升可访问性（ARIA 可加 aria-expanded 同步状态）。若需键盘支持（Enter/Space 触发），可为 .bottom-arrow 添加 tabindex="0" 并监听 keydown 事件。
✅ 最终效果
- 用户单击箭头按钮 → 内容区域平滑展开，箭头下移；
- 再次单击 → 内容平滑收起，箭头复位；
- 状态持久、响应明确、兼容性强，且代码清晰易维护。
这种「JS 控状态 + CSS 控表现」的分离模式，正是现代前端交互开发的最佳实践之一。
