17370845950

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

   
  
    hidden text
    hidden text
    hidden text
    hidden text
    hidden text
    hidden text
  

2. JavaScript（置于