无需 JavaScript，仅用 HTML5 与 CSS 即可实现基础的“显示/隐藏”交互——核心是利用 的状态切换配合 CSS 的 :checked 伪类与相邻兄弟选择器（+），实现对目标元素的显隐控制。
无需 javascript，仅用 html5 与 css 即可实现基础的“显示/隐藏”交互——核心是利用 `` 的状态切换配合 css 的 `:checked` 伪类与相邻兄弟选择器（`+`），实现对目标元素的显隐控制。
在现代 Web 开发中，JavaScript 常被用于处理用户交互（如点击按钮显示/隐藏内容），但当 JS 不可用、被禁用或需构建轻量级静态页面时，纯 HTML + CSS 方案就显得尤为实用且可靠。虽然 HTML5 本身不提供逻辑控制能力，但结合 CSS 的状态驱动特性（尤其是 :checked），我们能模拟出类似交互行为。
关键原理如下：
- 使用
<input type="checkbox">作为“开关”，其checked状态天然可被 CSS 捕获； - 利用
<label></label>关联 checkbox（通过for/id），实现语义化、无障碍的点击区域； - 通过 CSS 相邻兄弟选择器
+，精准定位 checkbox 后紧邻的目标元素，并根据其选中状态切换display属性。
以下为完整、可直接运行的示例代码：
<style>
/* 默认隐藏目标内容 */
.target {
display: none;
margin-top: 0.5rem;
padding: 0.75rem;
background-color: #f8f9fa;
border-radius: 4px;
border-left: 3px solid #007bff;
}
/* 隐藏复选框本身（保留功能，仅隐藏视觉） */
input[type="checkbox"] {
display: none;
}
/* 当复选框被勾选时，显示紧邻的 .target 元素 */
input[type="checkbox"]:checked + .target {
display: block;
}
</style><label for="toggle-content">? 点击展开/收起说明</label>
<input type="checkbox" id="toggle-content"><div class="target">
<h3>这是动态显示的内容</h3>
<p>无需任何 JavaScript —— 所有交互均由浏览器原生 CSS 引擎驱动，兼容所有支持 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/skill7377" title="Java Maven Secondary Analysis"><img
src="https://img.php.cn/upload/skill/000/000/081/179144831942131.jpg" alt="Java Maven Secondary Analysis" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7377" title="Java Maven Secondary Analysis" class="overflowclass">Java Maven Secondary Analysis</a>
<p class="overflowclass">分析ZIP压缩包或GitLab仓库中的Java Maven项目，确定二次开发范围、类数量、模块分布及生产相关指标。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7377" title="Java Maven Secondary Analysis" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</div>
✅ 优势说明：
- 完全静态、零 JS 依赖，适合离线文档、邮件模板、CDN 托管页等场景；
- 天然支持键盘导航（Tab 切换 + Space 触发）和屏幕阅读器（
<label></label>提供语义）； - 性能极佳，无运行时脚本开销。
⚠️ 注意事项与局限：
-
无法使用
<button></button>直接触发：HTML 原生按钮无状态属性，CSS 无法监听其“点击”，故必须借助表单控件（如checkbox或details/summary）； -
DOM 顺序受限：目标元素必须紧跟在 checkbox 后（使用
+），若需跨层级控制，可改用~（通用兄弟选择器）或details语义标签（见下文备选）； -
初始状态可控：将 checkbox 设为
checked属性即可默认展开（例如<input type="checkbox" id="toggle" checked>）； -
进阶替代方案：HTML5 原生
<details></details>标签也支持无 JS 折叠（<details><summary>标题</summary>内容</details>），但语义更偏向“辅助信息”，且样式定制灵活性略低于 checkbox 方案。
总结而言，这不是“绕过 JS 的妥协”，而是一种符合渐进增强理念的优雅实践：用最简标准技术达成核心交互目标。只要理解 CSS 状态选择器与 HTML 表单控件的协同机制，你就能在无 JS 环境下，依然交付健壮、可访问、高性能的用户界面。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
