Html 如何链接到展开/折叠部分并使其自动打开?

Html 如何链接到展开/折叠部分并使其自动打开?,html,hyperlink,bootstrap-4,expand,Html,Hyperlink,Bootstrap 4,Expand,我试图让引导展开/折叠详细信息在您从另一个页面链接到它们时自动打开 这方面的一个例子是,我想链接到一个类似的页面,该页面有一系列展开/折叠部分。但我希望能够做到的是,链接到一个特定的,并且只打开它。因此,如果我想从其他地方链接到上面页面上的AgriStabilty,我希望页面跳转到该部分(足够简单),但我也希望它被打开。如果我链接到其他地方的地理空间产品,我希望它转到该部分并打开 我知道,使用引导中的选项卡,您可以链接到特定的选项卡并将其打开。我看不到任何声明可以通过展开/折叠来完成。它似乎需要

我试图让引导展开/折叠详细信息在您从另一个页面链接到它们时自动打开

这方面的一个例子是,我想链接到一个类似的页面,该页面有一系列展开/折叠部分。但我希望能够做到的是,链接到一个特定的,并且只打开它。因此,如果我想从其他地方链接到上面页面上的AgriStabilty,我希望页面跳转到该部分(足够简单),但我也希望它被打开。如果我链接到其他地方的地理空间产品,我希望它转到该部分并打开

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

我们的网站也是以内容管理系统为模板的,所以我无法访问任何脚本或CSS,只能访问我可以放在正文部分的内容

我们已经尝试在锚之前添加并打开起始页上的链接(即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>

函数getAnchor(){
var currentUrl=document.URL,
urlParts=currentUrl.split(“#”);
返回(urlParts.length>1)?urlParts[1]:空;
}
if(document.URL.indexOf(“&open”)!=-1){
document.getElementById(getAnchor())。单击();
}
我们希望它能在页面上的正确位置(确实如此),然后模拟点击链接来扩展折叠的内容。但是,打开时,不会将&open添加到目标页面的URL中。因此,除了锚之外,上面的任何东西都不起作用。似乎有什么东西正在覆盖&open添加到URL


鉴于目前的限制,有人知道如何做到这一点吗?

我也看到过类似的情况。通过使用iframe,可以将另一个页面拉入当前html文档。更具体地说,可以通过调用URL中的关联id来引用网页的某个部分。请参阅有关stackoverflow的帖子:


样品

我也看到过类似的情况。通过使用iframe,可以将另一个页面拉入当前html文档。更具体地说,可以通过调用URL中的关联id来引用网页的某个部分。请参阅有关stackoverflow的帖子:


样品

希望这有帮助。欢迎评论。我们选择这条路线的部分原因是为了减少需要维护的页面数量,并最终迁移到新的内容管理系统。我也不确定是否允许我们使用iFrame;我们使用的文档(我见过)中没有提到iFrame,我也不确定它们是如何影响可访问性的。希望这能有所帮助。欢迎评论。我们选择这条路线的部分原因是为了减少需要维护的页面数量,并最终迁移到新的内容管理系统。我也不确定是否允许我们使用iFrame;我们使用的文档(我见过)都没有提到iframe,我也不确定它们是如何影响可访问性的。
<!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>