多锚点链接跳转至其他页面details标签并自动展开的实现方案

问题说明 #

首页竞赛列表通过带ID的锚点链接跳转至详情页后，跳转功能正常，但对应的<details>标签无法自动展开，需要实现多ID场景下的自动展开逻辑。

现有代码示例 #

• 首页锚点链接：

<a href="mydomain.at/turnierkalender#1530">Landesmeisterschaft Latein Wien | 07.09.2024</a>

• 详情页对应details标签：

<details class="turnier" id="1375" open="">
  <summary>
    <span class="date">07.09.2024</span>
    <span class="title">Landesmeisterschaft Latein Wien<br>...
  </summary>
  <div class="more-data" id="more-1375">
  <div class="more-details"> ...
  </div>
  </div>  
</details>

解决方案 #

通过JavaScript读取URL中的锚点ID，定位对应details标签并设置展开状态，同时兼容页面加载和锚点变化两种场景：

实现代码 #

// 处理锚点逻辑的函数
function processAnchor() {
  // 提取URL中的锚点ID（移除#符号）
  const anchorId = window.location.hash.slice(1);
  if (!anchorId) return;

  // 找到目标details元素
  const targetDetail = document.getElementById(anchorId);
  if (targetDetail && targetDetail.tagName === 'DETAILS') {
    // 设置为展开状态
    targetDetail.open = true;
    // 可选：平滑滚动到目标元素，优化体验
    targetDetail.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

// 页面加载完成时执行
window.addEventListener('load', processAnchor);
// 监听锚点变化（比如页面内跳转）
window.addEventListener('hashchange', processAnchor);

额外注意事项 #

• ID匹配问题：确保首页锚点的ID（如示例中的1530）与详情页details标签的id完全一致，否则无法定位到目标元素。
• 默认关闭所有标签：如果需要默认关闭所有details标签，可在页面加载时添加重置逻辑：

document.querySelectorAll('details.turnier').forEach(item => {
  item.open = false;
});

内容的提问来源于stack exchange，提问作者maya