覆盖由 <details> 标签控制的 HTML 元素可见性

Question

我想让

<details>

标签内的元素可见，即使

<details>

标签未使用 CSS 样式打开。我尝试使用

visibility

、

display

、

position

、修改

<details>

标签高度等，但没有任何效果。

在此示例中，我希望即使在关闭

<details>

标签后第二段也可见：

<details>
  <summary>Category</summary>
  <p>A paragraph</p>
  <p> An another paragraph</p>
</details>

我怎样才能实现这个目标？这可以在不操作 DOM 结构的情况下完成吗？

Answer 1

您不能严格使用 CSS 来执行此操作，但是您可以克隆该段落并将其附加到

<details>

元素之后 - 可能会影响您的样式，您可能需要以某种方式考虑到这一点。

这是脚本的详细版本，显示它正在做什么。 注意我在详细信息的段落中添加了一个类以始终隐藏它......

let details = document.querySelector('details');
let secondP = details.querySelector('p:last-of-type');
let clonedSecond = secondP.cloneNode(true);
secondP.classList.add('hide-me');
details.after(clonedSecond);

.hide-me {
  display: none;
}

<details>
  <summary>Category</summary>
  <p>A paragraph</p>
  <p> An another paragraph</p>
</details>