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

【问题标题】：HTML5 Details/Summary Open at Top Close From BottomHTML5 详细信息/摘要顶部打开从底部关闭
【发布时间】：2017-03-14 20:40:53
【问题描述】：

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

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

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

【问题讨论】：

标签： html css summary

【解决方案1】：

我不认为它可以使用 CSS 来完成。但是你可以使用javascript：

<!DOCTYPE html>
<html>
<body>

<script>
function closeDetails() {
    document.getElementById("details").removeAttribute("open");
    window.location = "#details";
}
</script>

<details id="details">
  <summary>Show Details</summary>
  <p>yadda yadda</p>
  <button onclick="closeDetails()">Close Details</button>
</details>

</body>
</html>

【讨论】：

这有一个不幸的结果，当详细信息块关闭时，您仍然位于页面下方，现在必须向上滚动浏览您尚未阅读的文本！奇怪的。它在 Safari、FireFox 和 Chrome 上表现如此。在我看来，这似乎是细节/摘要标签是如何实现（或规范）的一个错误。关闭后，你应该在你开始的地方结束。
添加到javascript函数中：window.location = "#details";
谢谢，但没有帮助。
糟糕。它确实有效 - 我犯了一个错误。谢谢。这不是我想要的工作方式，但它确实完成了工作。

【解决方案2】：

由于没有其他答案，我将 Sartoris 的答案标记为正确答案。

如果其他人想使用它，我冒昧地对其进行了一些修饰，以便它可以与页面上的多个“详细信息”元素一起使用，并且更加通用。这样，相同的功能和关闭按钮定义可以用于所有“详细信息”块，只要每个块都有唯一的 ID。

<!DOCTYPE html>
<html>
<body>

<script>
function closeDetail(detailsElement) {
    detailsElement.removeAttribute("open");
    window.location = '#' + detailsElement.id;
}
</script>

<details id="details">
  <summary>Show Details</summary>
  <p>yadda yadda</p>
  <button onclick="closeDetail(this.parentElement)">▲</button>
</details>

</body>
</html>

【讨论】：

不错！要放弃对 id 的需求，您可以使用 detailsElement.scrollIntoView()

【解决方案3】：

以下是纯 CSS 解决方案，只需在 <summary> 上使用 ::after 和绝对定位即可。

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>

【讨论】：

不错！效果很好 - 谢谢！