元素关闭时仍显示其内部特定子元素 " />

本文介绍在不破坏语义结构的前提下，通过轻量级 DOM 操作将 中的指定子元素（如第二个 ）移出并保持常显，解决纯 CSS 无法绕过 隐藏机制的限制。

本文介绍在不破坏语义结构的前提下，通过轻量级 dom 操作将 `

` 中的指定子元素（如第二个 `

`）移出并保持常显，解决纯 css 无法绕过 `

` 隐藏机制的限制。

HTML 的

元素具有原生折叠/展开行为：当 open 属性不存在或为 false 时，其所有非

子元素会被浏览器强制隐藏

（相当于 display: none），且该行为无法通过常规 CSS（如 visibility: visible、position: absolute 或 display: block）覆盖。这是由规范定义的渲染逻辑，而非样式层控制，因此纯 CSS 方案在此场景下不可行。

若需实现“关闭状态下仍显示某子元素”，可行方案是将目标元素从

内部移出，插入到其后（或前）的文档流中

。这属于轻量级 DOM 操作，不改变整体语义层级，也无需重写 HTML 结构：

<details><summary>Category</summary><p>A paragraph</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/ai/2100" title="度加剪辑"><img
														src="https://img.php.cn/upload/ai_manual/000/000/000/175680086070100.png" alt="度加剪辑" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/ai/2100" title="度加剪辑" class="overflowclass">度加剪辑</a>
													<p class="overflowclass">一款百度旗下的AI视频创作与剪辑工具，结合智能剪辑和数字人等能力，帮助用户快速完成短视频内容制作。</p>
												</div>
												<a rel="nofollow" href="/ai/2100" title="度加剪辑" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
  <p class="persistent">Another paragraph</p>
</details>

// 获取 details 元素和目标段落
const details = document.querySelector('details');
const targetP = details.querySelector('p.persistent');

if (targetP) {
  // 克隆节点（保留内容、属性、事件监听器需手动处理）
  const cloned = targetP.cloneNode(true);
  // 隐藏原始节点
  targetP.classList.add('hidden-in-details');
  // 将克隆节点插入到 details 之后
  details.after(cloned);
}

.hidden-in-details {
  display: none;
}
/* 可选：为克隆节点添加样式以匹配上下文 */
details + p.persistent {
  margin-top: 0.5em; /* 调整间距，避免与 summary 紧贴 */
}

⚠️ 注意事项：

• 克隆节点不继承原生事件监听器（如 onclick 属性或 addEventListener 绑定），如有交互需求，需对克隆节点重新绑定；
• 若
  含有动态内容（如通过 JS 插入），建议在 DOM 就绪后执行该逻辑（例如放在 DOMContentLoaded 回调中）；
• 为确保可访问性，避免将关键操作控件（如按钮、表单）移出
  ——屏幕阅读器可能丢失其上下文关联；
• 如需响应
  的 toggle 事件（例如同步显示状态），可监听 details.addEventListener('toggle', ...) 进行动态更新。

综上，虽然无法仅靠 CSS 实现目标，但通过一行 cloneNode + after() 的 DOM 操作，即可优雅达成效果，兼顾语义完整性与视觉需求。