怎样在现代CSS中用:has()配合:checked打造无JS折叠面板-css教程-PHP中文网

使用 :has() 配合 :checked 可以完全替代 javascript 实现折叠面板。核心做法是将放在内部，利用 css 选择器 .panel:has(> label > input:checked) 来检测状态，并通过 max-height 或 grid-template-rows 控制内容区域的展开与收起。

怎样在现代CSS中用:has()配合:checked打造无JS折叠面板

如何构建支持无限嵌套的层级结构

要实现无限层级的折叠效果，关键在于让每一层都复用相同的 HTML 结构和 CSS 逻辑。通过将 input 和 label 作为直接子元素包裹在容器内，CSS 选择器会自动向下穿透到所有后代层级，无需为不同深度编写额外的样式规则。

怎样在现代CSS中用:has()配合:checked打造无JS折叠面板

<div class="accordion">
  <div class="panel">
    <label>
      <input type="checkbox"><span>第一层标题</span>
    </label>
    <div class="content">
      <p>第一层内容</p>
      <div class="panel">
        <label>
          <input type="checkbox"><span>第二层标题</span>
        </label>
        <div class="content">
          <p>第二层内容</p>
        </div>
      </div>
    </div>
  </div>
</div>

上述代码展示了标准的嵌套结构。每个 .panel 内部包含一个 label，其中嵌入了 input。当点击 label 时，内部的 input 被选中，触发 :has() 匹配，从而改变当前 .panel 及其内部 .content 的样式。这种结构天然支持任意深度的嵌套，因为 CSS 选择器是递归应用的。

JSON Toolkit

JSON文件多功能工具。支持格式化、验证、压缩、键排序及点记法路径查询。零依赖。

下载

如何实现平滑过渡动画效果

由于 height: auto 无法直接参与 CSS 过渡动画，通常采用 grid-template-rows 技巧来实现平滑展开。将内容区域设为 display: grid，并将 grid-template-rows 从 0fr 过渡到 1fr。这种方法不仅性能更好，而且能完美处理内容高度未知的情况。

怎样在现代CSS中用:has()配合:checked打造无JS折叠面板

.panel {
  border: 1px solid #ccc;
  margin-bottom: 4px;
}

.panel label {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  background: #f9f9f9;
}

.panel .content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.panel:has(> label > input:checked) .content {
  grid-template-rows: 1fr;
}

.panel .content > div {
  overflow: hidden;
}

这段 CSS 定义了折叠面板的核心样式。.panel:has(> label > input:checked) 是关键的父级选择器，它确保只有当该面板内的标签被点击（即复选框被选中）时，才应用展开样式。grid-template-rows 的变化触发了浏览器内部的插值计算，实现了丝滑的动画效果。同时，overflow: hidden 保证了内容在过渡期间不会被裁剪溢出。

当多个面板同时展开时如何处理互斥行为

默认情况下，:has() 方案允许用户同时展开多个面板。如果需要实现手风琴效果（即展开一个面板时自动关闭其他面板），可以通过给 input 添加相同的 name 属性并配合 CSS 兄弟选择器来实现。但这会限制 :has() 的灵活性，因此更推荐保持独立展开的状态，或者通过极少量的 JS 来处理互斥逻辑。若坚持纯 CSS，可以使用 ~ 或 + 选择器针对特定相邻关系进行控制，但无法全局互斥。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！