<details>仅控制显隐，不支持权限状态；需内部嵌套<input>承载RBAC数据，用JS动态控制open属性实现“有修改则展开”，避免<summary>内放可点击控件，并注意移动端兼容性。
details 标签本身不支持多级嵌套权限状态
<details> 是原生折叠组件，但它的开闭纯靠用户点击，没有内置的「已勾选」「部分勾选」「禁用」等权限语义。你不能直接靠它表达 RBAC 中的「用户对资源 A 有读写、对资源 B 仅读」这种细粒度状态——它只管「显隐」，不管「权限值」。
所以真实场景中，<details> 只适合做容器，里面得手写 <input type="checkbox"> 或 <select> 来承载实际权限数据。
- 别把权限逻辑塞进
open属性里（它只是布尔值，不是权限快照） - 每个
<details>建议对应一个权限域（如「订单管理」「用户管理」），别按按钮粒度拆 - 用
<summary>写清晰的域名称 + 当前生效项数，比如「日志管理（已启用：2/3）」
如何让 checkbox 状态联动控制 details 的默认展开
想默认展开「有修改过的权限组」？<details> 的 open 属性是静态的，必须用 JS 动态设置。常见做法是在页面加载后遍历所有权限组，检查其内部是否有 checked 的 <input>，然后设 details.open = true。
document.querySelectorAll('details.permission-group').forEach(details => {
const hasChecked = details.querySelector('input[type="checkbox"]:checked');
if (hasChecked) details.open = true;
});
- 注意：不要在
<details>上直接写open=""，否则所有组默认展开，失去折叠意义 - 如果权限数据来自 API，JS 初始化要等数据渲染完再执行，否则查不到
input - 用
details.permission-group这类 class 而非id，方便批量操作
避免 summary 里放可点击控件导致行为冲突
<summary> 默认可点击触发折叠，但如果在里面加 <button> 或 <label>，点击它们也会触发折叠，干扰权限操作。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把操作控件（如「全选」「重置」）放在
<summary>外部，紧贴在<details>开始标签下方 - 或者给控件加
onclick="event.stopPropagation();"阻断冒泡（简单但不够健壮） - 别用
<label>包裹<summary>—— 会双重绑定点击，折叠和表单切换混在一起
移动端折叠体验差？加点 CSS 微调
原生 <details> 在 iOS Safari 和旧版 Android 上动画生硬，且 summary 左侧三角图标无法自定义颜色或大小。
- 用
summary::marker { color: #007bff; }改图标色（Chrome/Firefox 支持，Safari 不支持） - 为
details[open] > *:not(summary)加animation: slideDown 0.2s ease-out提升感知流畅度 - 真要兼容全平台且需定制样式，不如用
<div class="collapsible">+ JS 控制aria-expanded和hidden属性 ——<details>本质是渐进增强，不是强制依赖
细节堆多了容易失焦：权限分配的核心是数据准确和操作可追溯，折叠只是视觉组织手段。别为了「看起来高级」硬套 <details>，而忽略 checkbox 的 name 命名是否能被后端直接解析、是否加了 required 或 disabled 等语义属性。
