如何用纯 HTML/CSS 实现无 JavaScript 的“动态”列表扩容-html教程-PHP中文网

本文介绍一种不依赖 JavaScript 的纯前端方案，利用 CSS :checked 伪类与隐藏/显示机制，实现用户点击“添加”按钮后逐步展开预渲染列表项的效果，适用于需完全禁用 JS 的场景。

本文介绍一种不依赖 javascript 的纯前端方案，利用 css `:checked` 伪类与隐藏/显示机制，实现用户点击“添加”按钮后逐步展开预渲染列表项的效果，适用于需完全禁用 js 的场景。

在无法使用 JavaScript 的严格环境下（如政府合规要求、老旧设备支持或安全沙箱限制），仍需提供基础交互体验——例如让用户逐批展开表单输入字段。虽然真正的动态 DOM 操作不可行，但可通过预渲染 + CSS 控制显隐模拟“按需加载”效果。其核心思想是：将全部可能用到的输入项（如 100 个）预先写入 HTML，再通过复选框（）作为触发开关，结合 :checked 伪类与相邻/后续兄弟选择器（~），控制对应区块的可见性。

以下是一个可直接运行的最小可行示例，支持分组展开（每组 10 项），并自动切换“添加”按钮状态：



  <meta charset="UTF-8"><title>纯 CSS 列表扩容</title><style>
    /* 默认隐藏所有扩展区块和关联按钮 */
    .group, .add-btn { display: none; }

    /* 第一组始终可见 */
    .group:first-of-type { display: block; }

    /* 点击 checkbox 后，显示对应 group 和下一个 add-btn */
    #show11:checked ~ .group:nth-of-type(2) { display: block; }
    #show11:checked ~ #add11 { display: none; }
    #show11:checked ~ #add21 { display: inline-block; }

    #show21:checked ~ .group:nth-of-type(3) { display: block; }
    #show21:checked ~ #add21 { display: none; }
    #show21:checked ~ #add31 { display: inline-block; }

    /* 可继续按此模式扩展至 100 项 */
    .input-row { margin: 4px 0; }
    .add-btn {
      display: inline-block;
      padding: 6px 12px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
    }
    .add-btn:hover { background: #0056b3; }
  </style><!-- 基础列表（前 10 项） --><div class="group">
    <div class="input-row"><label>项目 1：<input type="text" name="item_1"></label></div>
    <div class="input-row"><label>项目 2：<input type="text" name="item_2"></label></div>
    <div class="input-row"><label>项目 3：<input type="text" name="item_3"></label></div>
    <div class="input-row"><label>项目 4：<input type="text" name="item_4"></label></div>
    <div class="input-row"><label>项目 5：<input type="text" name="item_5"></label></div>
    <div class="input-row"><label>项目 6：<input type="text" name="item_6"></label></div>
    <div class="input-row"><label>项目 7：<input type="text" name="item_7"></label></div>
    <div class="input-row"><label>项目 8：<input type="text" name="item_8"></label></div>
    <div class="input-row"><label>项目 9：<input type="text" name="item_9"></label></div>
    <div class="input-row"><label>项目 10：<input type="text" name="item_10"></label></div>
  </div>

  <!-- 第一组扩展开关与按钮 -->
  <input type="checkbox" id="show11" class="trigger"><label for="show11" id="add11" class="add-btn">+ 添加 10 项</label>

  <!-- 第二组（11–20） -->
  <div class="group">
    <div class="input-row"><label>项目 11：<input type="text" name="item_11"></label></div>
    <div class="input-row"><label>项目 12：<input type="text" name="item_12"></label></div>
    <div class="input-row"><label>项目 13：<input type="text" name="item_13"></label></div>
    <div class="input-row"><label>项目 14：<input type="text" name="item_14"></label></div>
    <div class="input-row"><label>项目 15：<input type="text" name="item_15"></label></div>
    <div class="input-row"><label>项目 16：<input type="text" name="item_16"></label></div>
    <div class="input-row"><label>项目 17：<input type="text" name="item_17"></label></div>
    <div class="input-row"><label>项目 18：<input type="text" name="item_18"></label></div>
    <div class="input-row"><label>项目 19：<input type="text" name="item_19"></label></div>
    <div class="input-row"><label>项目 20：<input type="text" name="item_20"></label></div>
  </div>

  <!-- 第二组扩展开关与按钮 -->
  <input type="checkbox" id="show21" class="trigger"><label for="show21" id="add21" class="add-btn">+ 添加 10 项</label>

  <!-- 第三组（21–30），依此类推…… -->
  <div class="group">
    <div class="input-row"><label>项目 21：<input type="text" name="item_21"></label></div>
    <div class="input-row"><label>项目 22：<input type="text" name="item_22"></label></div>
    <!-- ……省略其余项，实际中补全至 100 -->
  </div>

✅ 关键要点说明：