通过为容器添加/移除 `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"（因无对应 ）：
