树形导航子菜单默认收起需避免初始化时设display: block或show()，应纯css设.tree li ul { display: none; }，js仅响应点击切换显隐；须隔离事件目标（如只绑.arrow）、阻止冒泡及默认跳转，并注意ie8兼容与大数据懒加载。
树形导航怎么让子菜单默认收起不展开
默认展开所有节点是常见坑点，实际项目里几乎没人要这种体验。关键在初始化时别给 ul 加 style="display: block"，更别用 show() 强制展开。纯 CSS 方案最稳：.tree li ul { display: none; }，再配合 JS 只对点击的 li 下的 ul 切换 display 或加 class="open" 控制显隐。
容易忽略的是：如果用了 visibility: hidden 或 opacity: 0 替代 display: none，会导致 DOM 占据空间、影响点击区域，且无法真正“关闭”交互。
点击父节点时如何避免文字也被触发折叠
常见错误是给整个 li 绑 click，结果点文字时也折叠——这违背直觉。正确做法是只给指示图标（比如 ▶/▼）或额外加的 span.arrow 绑事件。HTML 结构建议这样写：
- ...
JS 里用 event.target.classList.contains('arrow') 判断，或者直接 e.stopPropagation() 阻止冒泡到 li。
另一个坑：用 <a href="#"></a> 包文字时没加 event.preventDefault()，会导致页面跳顶或刷新，看起来像“点了没反应”，其实是被默认行为干扰了。
如何兼容低版本 IE（比如 IE8）实现基础折叠
IE8 不支持 querySelector 和 classList，也不能用箭头函数。得退回原生 DOM API：
- 用
getElementsByTagName('ul')或getElementsByClassName替代querySelectorAll - 切换类名改用
element.className = element.className.replace(/open/g, '')这类字符串操作 - 事件绑定用
attachEvent('onclick', handler)，并注意this指向问题
性能上，IE8 下频繁操作 innerHTML 渲染极慢，所以别在循环里反复写死 HTML 字符串生成树，优先用 document.createElement + appendChild。
JSON 数据动态生成树结构时要注意什么
后端返回扁平数组（如带 id/pid 的列表）比嵌套结构更易维护和传输。生成树前先建 Map 索引：const map = new Map(data.map(item => [item.id, item]))，再遍历一次拼出父子关系。
容易出错的是递归渲染没设深度限制，遇到循环引用（比如某节点 pid 指向自己）直接栈溢出。加个 depth > 10 的硬性截断更稳妥。
如果数据量超过 200 条，别一次性全渲染，考虑懒加载：只展开一级，子节点等用户点击后再发请求拉取对应 pid 的子项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
