如何用HTML的details标签展示JSON数据树形结构-html教程-PHP中文网

标签本身不支持 json 展开折叠逻辑，需 javascript 递归生成嵌套结构并配合 css 实现树形效果，大 json 需懒加载或截断，生产环境推荐成熟库。

如何用html的details标签展示json数据树形结构

details 标签本身不支持 JSON 展开折叠逻辑

<details></details> 是纯 HTML 原生标签，只提供单层手动展开/收起能力，无法自动解析 JSON、生成嵌套 <details></details> 结构或响应点击动态加载。直接写 <details><summary>data</summary>{"name":"alice"}</details> 会把 JSON 当作纯文本显示，既不格式化也不可交互。

真正实现“JSON 树形结构”需要 JavaScript 配合 —— 用递归生成带 <details></details> 的 DOM，再加基础样式控制缩进和箭头。

用递归函数把 JSON 对象转成 details 嵌套结构

核心是写一个函数，对每个值类型（对象、数组、字符串、数字等）分别处理：对象/数组递归生成子 <details></details>，基础类型转为 <span></span> 显示。注意避开循环引用，控制最大递归深度防栈溢出。

Comprehensive Three.js 3D graphics reference

详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。

下载

用 typeof 和 Array.isArray() 准确判断类型，别只靠 obj.constructor === Object
键名要转义，防止 XSS：key.replace(/["]/g, '')，再放进 <summary></summary>
给每层 <details></details> 加 class="json-details" 方便后续 CSS 控制缩进和箭头

示例片段：

function jsonToDetails(obj, depth = 0) {
  if (depth > 10) return '<span>[max depth reached]</span>';
  if (obj === null) return '<span>null</span>';
  if (typeof obj === 'object') {
    const entries = Array.isArray(obj)
      ? obj.map((v, i) => `<div class="json-item">${i}: ${jsonToDetails(v, depth + 1)}</div>`).join('')
      : Object.entries(obj).map(([k, v]) => 
          `<div class="json-item">"${k}": ${jsonToDetails(v, depth + 1)}</div>`
        ).join('');
    return `<details class="json-details"><summary>${Array.isArray(obj) ? `Array(${obj.length})` : 'Object'}</summary>${entries}</details>`;
  }
  return `<span>${JSON.stringify(obj)}</span>`;
}

必须补上 CSS 才能有树形视觉效果

原生 <details></details> 没缩进、没箭头、summary 和内容混排。得用 CSS 强制控制：

用 margin-left 每层增加缩进：.json-details { margin-left: 1.2em; }
隐藏默认箭头，用 ::marker 或背景图重绘（注意 Safari 支持度）：.json-details summary::marker { content: "▸ "; }
折叠时隐藏子内容（<details></details> 默认行为），但需确保 .json-item 不撑开空白行：.json-details[open] > .json-item { margin-top: 0.2em; }
加字体等宽和基础颜色提升可读性：font-family: ui-monospace, SFMono-Regular, monospace;

JSON 太大时页面会卡死，得做懒加载或截断

递归生成整个 DOM 在 JSON 超过几千行时会阻塞主线程，用户点击后要等好几秒才出结果。不能只依赖“等它跑完”。

对数组/对象长度超过 50 的，先只渲染前 10 项 + “… + <button onclick="loadMore(...)">加载更多</button>”
用 requestIdleCallback 分片生成，避免长时间无响应
服务端提前做 JSON.stringify(obj, null, 2) 格式化并截断，前端只负责展示已处理好的片段
浏览器 DevTools 里直接用 console.dir(obj) 查看结构更稳，<details></details> 方案适合嵌入文档或简单调试页

真正上线时，多数人会选 react-json-view 或 json-tree-view 这类成熟库 —— 它们已处理好循环引用、性能分片、键盘导航、复制路径等细节。手写 <details></details> 方案只在极简场景或学习原理时值得投入。