Question

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

我希望能够点击细节部分的底部来关闭它。使用CSS，我可以在细节段的底部添加一个“关闭”三角形。可以做什么（最好是在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>

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

2 个答案: