如何链接到展开/折叠部分并自动打开？答案

【问题标题】：How can I link to an expand/collapse section and have it open automatically?如何链接到展开/折叠部分并自动打开？
【发布时间】：2019-04-13 03:34:49
【问题描述】：

当您从另一个页面链接到引导程序展开/折叠详细信息时，我正在尝试自动打开它们。

这方面的一个例子是我想链接到一个类似于http://www.agr.gc.ca/eng/?id=1535571735990 的页面，它有一堆展开/折叠部分。不过，我希望能够做的是链接到一个特定的并且只打开它。所以，如果我想从其他地方链接到上述页面上的 AgriStabilty，我希望页面跳转到该部分（很简单），但我也希望它也可以打开。如果我从其他地方链接到地理空间产品，我希望它转到该部分并打开它。

我知道使用引导程序中的选项卡，您可以链接到特定选项卡并将其打开。我没有看到任何可以通过展开/折叠完成的说明。它似乎需要 jQuery，我对此一无所知。

我们的网站也在内容管理系统中进行了模板化，因此我无法访问任何脚本或 CSS，只能访问我可以放入正文部分的内容。

我们已经尝试在起始页的链接中添加 &open 到锚点之前的链接（即?id=1553800901644&open#ar），然后在内容之前和内容之后添加以下脚本

起始页上的链接：

<a href="?id=1553800901644&open#ar">

上述目的地的目标页面上的 HTML：

<details id="ar">
      <summary>Arabic <i lang="ar">العربية</i></summary>
  stuff goes here
</details>

JavaScript：

<script>
function getAnchor() {
    var currentUrl = document.URL,
     urlParts   = currentUrl.split('#');

    return (urlParts.length > 1) ? urlParts[1] : null;
}

if(document.URL.indexOf("&open") != -1) {
     document.getElementById(getAnchor()).click();
}
</script>

我们希望它会转到页面上的正确位置（确实如此），然后模仿点击链接来展开折叠的内容。但是，&open 在打开时不会添加到目标页面的 URL。因此，除了锚点之外，以上没有任何作用。似乎有些东西正在覆盖 URL 的 &open 添加。

鉴于手头的限制，有人知道该怎么做吗？

【问题讨论】：

标签： html hyperlink bootstrap-4 expand

【解决方案1】：

我见过类似的情况。通过使用 iframe，可以将其他页面拉入当前的 html 文档。更具体地说，可以通过调用 URL 中的关联 id 来引用网页的一部分。参考stackoverflow上的这篇文章：link to a section of a webpage

<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div>
<iframe src="url_where_dropdown_accordian_is_and_reference_id_of_div_tag_of_opened_accordian?" style="border:none;"></iframe>
</div>
</body>
</html>

【讨论】：

希望这会有所帮助。评论赞赏。
走我们这条路的部分原因是为了减少需要维护并最终迁移到新的内容管理系统的页面数量。我也不确定我们是否可以使用 iframe；我们使用的文档（我见过的）都没有提到 iframe，我也不确定它们如何影响可访问性。