HTML5 Details/Summary 顶部开盘底部收盘

Question

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

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

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

Answer 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>

Answer 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>

Answer 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>

HTML5 Details/Summary 顶部开盘底部收盘

HTML5 Details/Summary Open at Top Close From Bottom

html

css

summary