本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。
本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。
在严格限制 JavaScript 使用的环境（如高安全性内网系统、老旧浏览器兼容需求或无障碍优先场景）中，仍需提供用户友好的交互体验。本方案巧妙利用 HTML 表单控件（<input type="checkbox">）的选中状态与 CSS 的 :checked 伪类，结合相邻/后续兄弟选择器（~），实现“点击添加”视觉效果——实则为切换预置 DOM 元素的显隐状态。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
核心原理
- 每个“添加按钮”对应一个隐藏的复选框（<input type="checkbox" id="showX">），其 <label> 标签通过 for 属性绑定，点击即触发该复选框状态切换。
- CSS 利用 #showX:checked ~ #target 选择器，当复选框被勾选时，显示后续指定区块（如下一组 10 个输入项），同时隐藏当前按钮、显示下一级按钮。
- 所有内容（最多 100 项）在页面加载时已静态存在，无 DOM 操作，完全符合无 JS 要求。
完整示例（支持 20 项，可扩展）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯 CSS 动态列表</title>
<style>
/* 默认隐藏所有扩展区块和按钮 */
#eleven, #add11, #show11,
#show21, #add21 {
display: none;
}
/* 勾选 show11 后：显示第11–20项，隐藏 add11，显示 add21 */
#show11:checked ~ #eleven { display: block; }
#show11:checked ~ #add11 { display: none; }
#show11:checked ~ #add21 { display: inline; }
/* 可继续扩展：show21 控制第21–30项... */
#twentyone { display: none; }
#show21:checked ~ #twentyone { display: block; }
</style>
</head>
<body>
<!-- 初始可见的前10项 -->
<div id="one">
<div><input type="text" placeholder="项目 1"></div>
<div><input type="text" placeholder="项目 2"></div>
<div><input type="text" placeholder="项目 3"></div>
<div><input type="text" placeholder="项目 4"></div>
<div><input type="text" placeholder="项目 5"></div>
<div><input type="text" placeholder="项目 6"></div>
<div><input type="text" placeholder="项目 7"></div>
<div><input type="text" placeholder="项目 8"></div>
<div><input type="text" placeholder="项目 9"></div>
<div><input type="text" placeholder="项目 10"></div>
</div>
<!-- 第1级添加按钮（初始显示） -->
<input type="checkbox" id="show11">
<label id="add11" for="show11">+ 添加 10 项</label>
<!-- 第11–20项（初始隐藏） -->
<div id="eleven">
<div><input type="text" placeholder="项目 11"></div>
<div><input type="text" placeholder="项目 12"></div>
<div><input type="text" placeholder="项目 13"></div>
<div><input type="text" placeholder="项目 14"></div>
<div><input type="text" placeholder="项目 15"></div>
<div><input type="text" placeholder="项目 16"></div>
<div><input type="text" placeholder="项目 17"></div>
<div><input type="text" placeholder="项目 18"></div>
<div><input type="text" placeholder="项目 19"></div>
<div><input type="text" placeholder="项目 20"></div>
</div>
<!-- 第2级添加按钮（初始隐藏） -->
<input type="checkbox" id="show21">
<label id="add21" for="show21">+ 添加 10 项</label>
<div id="twentyone">/* 此处可插入第21–30项 */</div>
</body>
</html>注意事项与局限性
- ✅ 零 JS 依赖：完全符合禁用脚本的合规要求；
- ⚠️ 扩展成本高：每增加一组需手动编写新 checkbox、label 和 CSS 规则，100 项需定义 10 组逻辑，维护性较差；
- ⚠️ 无障碍友好度有限：屏幕阅读器可能无法自然传达“展开”语义，建议为 <label> 添加 aria-expanded 属性（需 JS 支持，故此处权衡取舍）；
- ⚠️ 状态不可持久：页面刷新后复选框重置，已展开内容将收起；
- ? 适用场景明确：仅推荐用于条目上限确定、变更极少、且 JS 真实不可用的特殊项目。
综上，该方案是 CSS 能力边界的优雅实践，虽非真正动态，却以声明式方式达成可用性目标。若未来允许引入轻量 JS，强烈建议迁移到 document.createElement() 动态追加方案——它更灵活、可维护、语义清晰，且能自然支持表单提交与状态保持。
