本文介绍一种纯 HTML + CSS 方案，利用隐藏复选框（checkbox）与相邻兄弟选择器（+）控制目标元素的显示/隐藏状态，实现“点击展开、再点击或点击外部收起”的交互效果，无需任何 JavaScript。
本文介绍一种纯 HTML + CSS 方案，利用隐藏复选框（checkbox）与相邻兄弟选择器（`+`）控制目标元素的显示/隐藏状态，实现“点击展开、再点击或点击外部收起”的交互效果，无需任何 JavaScript。
在前端开发中，常需实现“点击按钮显示下拉菜单，再次点击或点击页面其他区域时隐藏”的交互。若仅依赖 CSS 的 :active 或 :focus 伪类，往往无法持久维持可见状态——因为它们仅在用户按住或聚焦时生效，松开即失效，无法满足“保持可见直至下次触发”的需求。
此时，隐藏的 成为理想的状态容器：它天然支持两种稳定状态（checked / unchecked），且可通过
✅ 推荐实现方案（纯 CSS）
以下是最简洁、健壮且符合语义的写法：
<div class="choices">
<span>movies</span>
<label class="choices-trigger">
<input type="checkbox" class="choices-toggle" aria-hidden="true"><div class="choices__items">
<div>
<a href="#">all</a>
<a href="#">films</a>
<a href="#">series</a>
</div>
</div>
</label>
</div>
/* 隐藏 checkbox，但保留其功能 */
.choices-toggle {
position: absolute;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
/* 初始隐藏下拉项 */
.choices__items {
visibility: hidden;
opacity: 0;
transition: visibility 0.2s, opacity 0.2s ease;
margin-top: 8px;
}
/* 勾选时显示（支持平滑过渡） */
.choices-toggle:checked + .choices__items {
visibility: visible;
opacity: 1;
}
/* 可选：增强点击区域（使整个 span 或 label 可点） */
.choices-trigger {
display: inline-block;
position: relative;
}
? 关键原理说明
- input[type="checkbox"] 是唯一能在纯 CSS 中持久记录“是否激活”状态的原生元素；
- + 是相邻兄弟选择器，要求 .choices__items 紧跟在 input 后（同级且紧邻），因此必须将 input 放在 label 内部并前置；
- aria-hidden="true" 保证屏幕阅读器忽略该隐藏控件，避免冗余播报；
- 使用 visibility + opacity 组合而非仅 display: none，是为了支持 CSS 过渡动画（display 不可过渡）。
⚠️ 注意事项
- DOM 结构必须严格匹配：.choices__items 必须是 input.choices-toggle 的直接相邻兄弟元素，否则 :checked + .choices__items 不会生效；
- 不要用 :active 模拟开关：如原问题中的 .choices:active .choices__items，该样式仅在鼠标按下瞬间触发，松开即失效，无法维持状态；
- 点击外部自动收起？CSS 有限制：纯 CSS 无法监听全局点击事件，因此“点击外部关闭”需额外技巧（如配合 :focus-within 或覆盖全屏透明层）。若需完整行为，建议引入轻量 JS；但本方案已满足“点击切换显隐”的核心诉求；
- 移动端兼容性：确保 label 或 input 具备足够点击热区（最小 44×44px），可添加 min-height: 44px 或 padding 优化触控体验。
✅ 总结
纯 CSS 实现点击显隐的本质，是将 UI 状态映射到表单控件的内在状态上。复选框（checkbox）因其双态性、可样式化、可 label 绑定等特性，成为该场景下的最佳选择。该方案零 JS、语义清晰、可访问性强，适用于导航菜单、筛选面板、响应式汉堡菜单等多种场景，是现代 CSS 工程实践中的经典模式之一。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
