闭合状态details元素内部锚点跳转的无JS实现方案问询

无JavaScript实现方案（兼容现代主流浏览器） #

核心通过CSS的:has()伪类实现锚点命中时自动展开details，同时支持精准定位。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
/* 匹配内部存在锚点目标的details，强制展开内容 */
details:has(:target) > :not(summary) {
  display: block;
  margin-block: 1em;
}
/* 同步展开状态的三角标记样式，和原生展开效果一致 */
details:has(:target) > summary::marker {
  content: "▼ ";
}
</style>
</head>
<body>
<details open>
  <summary>This is the summary</summary>
  <a name="a1" id="a1"></a>
  <p>Here are all the details.</p>
</details>
<!-- 测试时替换为超过一屏的长文本验证滚动效果 -->
<p>Imagine more than a page of text here.</p>
<p><a href="#a1">This</a> is a link pointing inside the details.</p>
</body>
</html>

实现逻辑 #

• 当点击指向#a1的链接时，:target伪类会命中id="a1"的锚点元素
• 通过details:has(:target)选择器匹配到包裹该锚点的details元素，强制覆盖默认折叠样式，将内部隐藏内容展示为展开状态
• 浏览器会自动滚动到命中:target的锚点位置，实现精准定位

降级方案（仅滚动到summary位置，不自动展开） #

如果不需要自动展开details，仅要求跳转到可见的summary位置，可以直接将锚点ID绑定到details元素本身：

<details id="a1" open>
  <summary>This is the summary</summary>
  <p>Here are all the details.</p>
</details>

此时无论details是否折叠，点击指向#a1的链接都会直接滚动到details元素所在位置，不需要额外CSS。

兼容性说明 #

上述用到的:has()伪类已得到Firefox 121+、Chrome 105+、Safari 15.4+的支持，覆盖目前90%以上的全球活跃浏览器用户。如果需要兼容更旧的浏览器版本，只能通过JavaScript监听hashchange事件实现展开逻辑。

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