无需 JavaScript，仅用 HTML5 与 CSS 即可实现点击触发的元素显示/隐藏效果；核心思路是利用 的状态切换 + CSS :checked 伪类和相邻兄弟选择器（+），实现可控、语义化且可访问的基础交互。
无需 javascript，仅用 html5 与 css 即可实现点击触发的元素显示/隐藏效果；核心思路是利用 `` 的状态切换 + css `:checked` 伪类和相邻兄弟选择器（`+`），实现可控、语义化且可访问的基础交互。
在现代 Web 开发中，JavaScript 常被用于处理交互逻辑，但许多基础 UI 行为——如展开/收起内容——完全可以通过纯 HTML + CSS 实现，尤其适用于 JS 被禁用、调试受限或追求极致轻量化的场景。
以下是一个简洁、可靠且符合语义规范的纯 CSS 显隐方案：
<style>
/* 默认隐藏目标内容 */
.target {
display: none;
margin-top: 0.5rem;
padding: 0.75rem;
background-color: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #007bff;
}
/* 隐藏原生 checkbox（保留功能，移除视觉干扰） */
input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 当 checkbox 被选中时，显示紧邻其后的 .target 元素 */
input[type="checkbox"]:checked + .target {
display: block;
}
/* 可选：为 label 添加手型光标和轻微悬停反馈 */
label[for="toggle"] {
cursor: pointer;
font-weight: 600;
color: #007bff;
user-select: none;
}
label[for="toggle"]:hover {
text-decoration: underline;
}
</style><label for="toggle">? 点击展开/收起说明</label>
<input type="checkbox" id="toggle"><div class="target">
<p>这是通过纯 CSS 控制显隐的目标内容区域。</p>
<p>无需任何 JavaScript，兼容所有支持 CSS3 的现代浏览器（Chrome、Firefox、Safari、Edge ≥12）。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
✅ 关键原理说明：
-
<input type="checkbox">提供可切换的布尔状态（checked/unchecked）； -
label[for="toggle"]关联该 checkbox，点击 label 即等效于点击复选框，提升可访问性； - CSS 中
input:checked + .target利用相邻兄弟选择器（+），精准控制紧跟其后的.target元素的display属性； -
opacity: 0+position: absolute比display: none更安全地隐藏 checkbox，避免布局偏移，同时保持表单语义与键盘可聚焦性。
⚠️ 注意事项：
- 此方案不支持
<button></button>标签直接触发（button 本身无状态，无法被:checked修饰），必须借助表单控件（如 checkbox 或 radio）； - 目标元素必须是 checkbox 的下一个同级元素（不能跨层级或使用
~通用兄弟选择器——它无法反向选择）； - 若需动画过渡（如淡入/滑动），可补充
transition: max-height 0.3s ease, opacity 0.3s ease并配合max-height和opacity替代display（因display不可动画）； - 对 SEO 和屏幕阅读器友好：内容始终存在于 DOM 中，仅视觉隐藏，确保可索引、可朗读。
该方法虽不如 JavaScript 灵活（例如无法动态绑定多个目标、不支持复杂条件判断），但在静态页面、邮件模板、CMS 内容块或 JS 失效降级场景中，是一种优雅、健壮且标准兼容的替代方案。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
