如何用纯 CSS 实现无 JavaScript 的“动态”列表展开效果-html教程-PHP中文网

如何用纯 CSS 实现无 JavaScript 的“动态”列表展开效果

本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。

本文介绍一种不依赖 javascript、仅通过 html + css（利用 :checked 伪类与兄弟选择器）实现的渐进式列表展开方案，适用于需完全禁用 js 的场景，本质是预渲染固定数量条目并按需显示。

在严格限制 JavaScript 使用的环境（如高安全性内网系统、老旧浏览器兼容需求或无障碍优先场景）中，仍需提供用户友好的交互体验。本方案巧妙利用 HTML 表单控件（）的选中状态与 CSS 的 :checked 伪类，结合相邻/后续兄弟选择器（~），实现“点击添加”视觉效果——实则为切换预置 DOM 元素的显隐状态。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

核心原理

每个“添加按钮”对应一个隐藏的复选框（），其标签通过 for 属性绑定，点击即触发该复选框状态切换。
CSS 利用 #showX:checked ~ #target 选择器，当复选框被勾选时，显示后续指定区块（如下一组 10 个输入项），同时隐藏当前按钮、显示下一级按钮。
所有内容（最多 100 项）在页面加载时已静态存在，无 DOM 操作，完全符合无 JS 要求。

完整示例（支持 20 项，可扩展）



  <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><!-- 初始可见的前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>