书签链接应打开面板答案

【问题标题】：Bookmark link should open panel书签链接应打开面板
【发布时间】：2021-09-14 11:21:29
【问题描述】：

我有一个带有 Bootstrap 卡片和 HTML 详细信息标签的 html 文件，用于创建可折叠的下拉面板。

这是一个例子

<details class="dropdown card mb-3">
  <summary class="summary-title card-header">
    <strong>Test</strong>
    <div class="summary-down docutils">
  </summary>
  <div class="summary-content card-body docutils">
    <p class="card-text" id=Content1>Content of the dropdown</p>
  </div>
</details>

我为下拉面板的内容提供了一个 ID，因此当我重新加载末尾带有书签的链接 (link#content1) 时，我遇到了以下问题。

如果下拉面板已经打开，该网站只会让我访问页面上的书签。如果它关闭，则链接中的书签将被忽略。

如果加载链接#content1，有什么方法可以打开相应的下拉面板？（我在 html 中没有锚标记，只有给内容的 id）

编辑：基本上我需要的是，如果我通过 url html#content1 加载 html 页面，则 html 文件需要将 open = "open" 标记添加到相应的详细信息元素。

<details class="dropdown card mb-3" open="open">
  <summary class="summary-title card-header">
    <strong>Test</strong>
    <div class="summary-down docutils">
  </summary>
  <div class="summary-content card-body docutils">
    <p class="card-text" id=Content1>Content of the dropdown</p>
  </div>
</details>

提前致谢

【问题讨论】：

欢迎来到stackoverflow！请在 minimal reproducable example 中添加更多详细信息，例如 html 和 css，最多在 stack snippet 中添加。见how to ask
@biberman 谢谢我编辑了我的帖子

标签： javascript html

【解决方案1】：

正如您所说，您没有任何 <a> 标记链接到隐藏元素，只是希望在使用 #Content1 哈希访问页面时自动显示它，您可以使用此 JavaScript 代码，它检查如果哈希等于#Content1，如果是，则将open="open" 添加到包含“Content1”作为 ID 的元素：

if (window.location.hash === '#Content1') {
  document.querySelector('#Content1').closest('details').setAttribute('open', 'open');
}

【讨论】：