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

Question

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

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

details[open]:after {
   content:'▲';
}

Answer 1

下面是一个纯 CSS 的解决方案，只需使用 ::after在 <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>