javascript - 书签链接应该打开面板

Question

我有一个带有 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 中没有 anchor 标记，只有给内容的 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>

提前致谢

Answer 1

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

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