标签关闭时其内部元素仍保持可见
" />
CSS 无法绕过 <details> 的原生显示逻辑，但可通过 JavaScript 克隆目标元素并移出 DOM 来实现“视觉上始终可见”的效果，无需修改原始 HTML 结构语义。
css 无法绕过 `` 的原生显示逻辑，但可通过 javascript 克隆目标元素并移出 dom 来实现“视觉上始终可见”的效果，无需修改原始 html 结构语义。
<details> 是一个语义化、可访问性友好的原生 HTML 折叠组件，其内容区域（<summary> 后的子元素）在 open 属性为 false 时，浏览器会强制隐藏——这不是通过 display: none 或 visibility: hidden 实现的，而是由用户代理样式表深度控制的渲染行为。因此，任何仅依赖 CSS 的尝试（如设置 visibility: visible、display: block、position: absolute 或强行撑高容器）均无效。
✅ 正确解法是：将需常显的元素从 <details> 内部克隆一份，并插入到 <details> 元素之后的 DOM 位置。这样既保留了原始结构的语义与可访问性（屏幕阅读器仍能正确播报折叠状态），又实现了视觉上的“始终可见”。
以下是一个轻量、无依赖的实现示例：
<details> <summary>Category</summary> <p>A paragraph</p> <p class="always-visible">Another paragraph</p> </details>
/* 隐藏原始副本，确保仅克隆体显示 */
.always-visible {
display: none;
}document.addEventListener('DOMContentLoaded', () => {
const details = document.querySelector('details');
const target = details.querySelector('.always-visible');
if (target) {
const clone = target.cloneNode(true);
clone.classList.remove('always-visible'); // 可选：清理类名以避免样式冲突
details.after(clone);
}
});⚠️ 注意事项：
- 克隆后的元素脱离 <details> 上下文，不再受 open 状态影响，但也不再响应 <details> 的 toggle 事件（如需动态同步，可监听 toggle 事件并更新克隆体）；
- 若页面含多个 <details>，应使用 querySelectorAll 并遍历处理；
- 克隆节点不继承原始事件监听器（如内联 onclick），如有交互逻辑，需重新绑定或使用事件委托；
- 为保障可访问性，切勿移除或隐藏原始 <details> 内容——克隆仅为视觉增强，语义结构必须完整保留。
总结：这不是 CSS 局限，而是 <details> 的设计本意：它代表“条件性内容”，强制封装与隔离。当业务需要部分“穿透式可见”时，DOM 克隆 + 语义隔离是最符合标准、兼容性最佳且无障碍友好的方案。
