最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
如何用纯 CSS 实现无 JavaScript 的动态列表展开效果
时间：2026-06-30 11:05:57 编辑：袖梨 来源：一聚教程网
本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。
本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。
在严格限制 JavaScript 使用的环境（如高安全性内网系统、老旧浏览器兼容需求或无障碍优先场景）中，仍需提供用户友好的交互体验。本方案巧妙利用 HTML 表单控件（<input type="checkbox">）的选中状态与 CSS 的 :checked 伪类，结合相邻/后续兄弟选择器（~），实现“点击添加”视觉效果——实则为切换预置 DOM 元素的显隐状态。
核心原理
- 每个“添加按钮”对应一个隐藏的复选框（<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() 动态追加方案——它更灵活、可维护、语义清晰，且能自然支持表单提交与状态保持。