本文详解如何通过纯 CSS（不依赖 JavaScript 或 jQuery）实现点击标签切换显示/隐藏含多个复选框的下拉内容区域，关键在于正确使用 与 的语义化关联及相邻兄弟选择器 :checked + .toggle-content。
本文详解如何通过纯 css（不依赖 javascript 或 jquery）实现点击标签切换显示/隐藏含多个复选框的下拉内容区域，关键在于正确使用 `` 与 `
要实现“点击标签展开/收起多选下拉面板”的效果，核心逻辑是利用 HTML 表单控件的原生状态（ ✅ 正确做法如下： 以下是完整可运行的 HTML + CSS 示例： 你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在 ⚠️ 注意事项： 该方案完全零 JavaScript，轻量、语义清晰、易于维护，适用于表单筛选、权限配置、多选导航等场景。:checked）驱动 CSS 显示控制。但必须注意：CSS 相邻兄弟选择器（+）仅对紧邻的、同级的后续元素生效，且目标元素必须是 <input type="checkbox">，而非 <div>。<p>在原始代码中，问题根源有二：</p>
<ol>
<li>使用 <code><div class="hidden-checkbox"></div> 模拟 checkbox —— 这无法触发 :checked 伪类，因为 :checked 仅适用于 <input type="checkbox"> 或 <input type="radio">；
<div> 标签被错误地 placed <em>inside</em> the label’s closing tag，且未与 label 正确建立 <code>for/id 关联。
.hidden-checkbox 应用于真实的 <input type="checkbox"> 元素，并设 display: none 隐藏它；<label for="toggleVendors"></label> 与 <input id="toggleVendors"> 的 id 完全一致，实现点击文本即可切换 checkbox 状态；.toggle-content 是 <input> 的直接相邻兄弟元素（即 <input> 后紧跟 <div class="toggle-content">），这样才能使 <code>.hidden-checkbox:checked + .toggle-content 生效。
<div class="dropdown-container">
<label for="toggleVendors" class="label-toggle form-control">
▼ click here to toggle options
</label>
<input type="checkbox" id="toggleVendors" class="hidden-checkbox"><div class="toggle-content">
<ul>
<li>
<input type="checkbox" id="opt-1"><label for="opt-1">Option One</label>
</li>
<li>
<input type="checkbox" id="opt-2"><label for="opt-2">Option Two</label>
</li>
<li>
<input type="checkbox" id="opt-3"><label for="opt-3">Option Three</label>
</li>
</ul>
</div>
</div>
.hidden-checkbox {
display: none; /* 必须隐藏真实 checkbox，不可用 div 替代 */
}
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: dimgrey;
color: white;
border: 1px solid black;
border-radius: 5px;
padding: 3px;
margin-top: 4px;
width: max-content;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.label-toggle {
cursor: pointer;
display: inline-block;
padding: 6px 12px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
}
/* 关键：仅当 checkbox 被勾选时，紧邻的 .toggle-content 显示 */
.hidden-checkbox:checked + .toggle-content {
display: block;
}
/* 基础列表样式 */
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow-y: auto;
max-height: 100px;
padding-right: 10px;
}
li {
padding: 4px 8px;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 6px;
}
li:hover {
background-color: darkgrey;
}
/* 可选：增强可访问性，为复选框添加可见标签 */
li label {
user-select: none;
cursor: pointer;
font-weight: normal;
}
.hidden-checkbox 必须是 <input type="checkbox">，且 .toggle-content 必须是其下一个同级元素（不能嵌套、不能隔层）；<input> 添加对应 <label for="id"></label>，提升可点击区域与屏幕阅读器支持；.toggle-content 使用 position: absolute 时，建议将其父容器（如 .dropdown-container）设为 position: relative，确保绝对定位参照正确；:checked + * 支持较弱，若需广泛兼容，可额外添加 :focus-within 回退方案（但本例坚持纯 CSS 无 JS，故以标准方案为准）。
