如何设置Markdown详情块锚点链接，点击后自动展开详情内容？

纯Markdown本身不支持通过锚点链接直接触发details组件展开——锚点的原生行为仅完成页面定位，不会触发元素的交互状态变更。要实现点击锚点既定位又展开折叠内容，需要结合HTML属性和一段简单的JavaScript脚本，具体步骤如下：

1. 为details组件添加唯一ID #

直接给<details>标签设置id属性（不要仅给summary添加，定位和触发的可靠性更高），同时保持默认折叠状态（不写open属性即可）：

<details id="setup-step">
  <summary>初始化环境设置</summary>
  <ul>
    <li>下载并安装最新版本的客户端</li>
    <li>验证系统兼容性</li>
    <li>完成基础配置向导</li>
  </ul>
</details>

<details id="deploy-step">
  <summary>部署业务模块</summary>
  <p>1. 上传配置文件至指定目录</p>
  <p>2. 启动服务并检查日志</p>
</details>

2. 创建指向details ID的内部锚点链接 #

用标准的Markdown内部链接格式，指向对应details的ID：

- [快速跳转到初始化步骤](#setup-step)
- [查看部署流程](#deploy-step)

3. 添加JavaScript脚本实现展开逻辑 #

在文档末尾插入这段脚本，它会监听锚点点击事件，当目标是details元素时自动设置其展开状态：

document.addEventListener('DOMContentLoaded', function() {
  // 处理锚点点击事件
  document.querySelectorAll('a[href^="#"]').forEach(link => {
    link.addEventListener('click', function() {
      const targetId = this.getAttribute('href').slice(1);
      const target = document.getElementById(targetId);
      if (target && target.tagName === 'DETAILS') {
        target.open = true;
      }
    });
  });

  // 处理页面加载时的锚点（比如直接打开带锚点的URL）
  const hash = window.location.hash.slice(1);
  if (hash) {
    const target = document.getElementById(hash);
    if (target && target.tagName === 'DETAILS') {
      target.open = true;
    }
  }
});

注意事项 #

• 确保你的Markdown渲染环境支持HTML和JavaScript（比如GitHub Pages、自定义静态站点、支持脚本的Markdown预览工具）；
• 如果是完全静态无JS支持的环境（部分纯Markdown阅读器），无法实现自动展开，只能手动点击summary展开内容。

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