HTML5 详细信息/摘要 从顶部打开 从底部关闭

Question

我使用 HTML5 的摘要/详细信息标签来隐藏/显示文档页面上的额外文本。额外的文本很长，摘要标记的打开/关闭性质是您必须单击摘要行才能打开和关闭详细信息块。这意味着，在向下滚动长文本的长度后，您必须向上滚动回摘要标签才能单击将其关闭。

\n\n

我希望能够单击详细信息部分的底部将其关闭。使用 CSS，我可以在细节部分的底部添加一个“闭合”三角形。可以做什么（最好是在 CSS 中）来点击三角形来关闭细节块？

\n\n

details[open]:after {\n   content:'\xe2\x96\xb2';\n}\n

\n

Answer 1

下面是一个纯 CSS 解决方案，只需使用::afteron<summary>和绝对定位。

details.test {
    position: relative;
    padding: 5px 0;
}

details.test[open]>summary::after {
    display: inline-block;
    content: "close";
    position: absolute;
    right: 0;
    bottom: 0;
}

<details class="test">
  <summary>Example</summary>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
</details>