bootstrap原生不支持响应式多级树形目录，需绕开其js组件，用html结构+css媒体查询+轻量js控制显隐；常见问题包括移动端点击冒泡致全收起、触控逻辑误判、hover与click未分离，稳定方案是用.nav-pills.flex-column配合手动.submenu实现可控展开。
Bootstrap 原生不支持响应式多级树形目录——.dropdown 最多两级，.nav-pills.flex-column 没有嵌套逻辑，bootstrap-treeview 默认不处理移动端折叠/触控冒泡。真要跑通「垂直 + 多级 + 响应式 + 可点击展开」，得绕开 Bootstrap 的 JS 组件，用结构 + CSS 媒体查询 + 轻量 JS 控制显隐。
为什么 bootstrap-treeview 在移动端常点不动或全收起
常见错误现象是：点击二级节点时整个树突然收拢、子菜单闪一下就消失、iOS 上必须点两次才展开。
-
bootstrap-treeview依赖 jQuery 和data-toggle="treeview"，但它的事件绑定默认不阻止冒泡，移动端 touch 事件触发后常连带触发父级collapse或dropdown - 它默认把所有节点渲染为
<li>@#@#@#@#@#@#@#@#@#@0<ul class="submenu"><li><a>二级</a></li></ul> </li> - 初始隐藏：
.submenu { display: none; }；桌面端（≥992px）设为display: block;，实现常开 - 移动端 JS 只监听
.nav-link点击，用e.target.nextElementSibling?.classList.toggle('show')控制对应.submenu，并立刻e.stopPropagation() - 别用
data-bs-toggle，也别给.submenu加dropdown-menu类——否则 Bootstrap 的 JS 会接管并破坏逻辑
异步加载子节点时如何避免重复请求和状态错乱
车型目录这类几万条数据的场景，必须按需加载，但容易出现“点两次才出数据”“展开后内容空白”“多个节点同时请求打架”等问题。
- 每个节点加唯一
data-id和data-loaded="false"属性，AJAX 成功后改为"true"，防止重复请求 - 请求前先清空目标
.submenu，再append()新<li>，避免旧 DOM 残留导致事件绑定错位 - 用
fetch+AbortController控制请求生命周期：用户快速连续点击不同节点时，自动取消前一个未完成请求 - 后端 JSON 必须包含
hasChildren: true/false字段，前端据此决定是否渲染「▶」图标和绑定 click 事件，避免无意义请求
字母导航与首字母分组怎么不卡顿
几万条品牌数据一次性加载后做首字母分组，如果用 for 循环暴力遍历，页面会明显卡顿（尤其低端安卓机）。
- 用
Array.prototype.reduce()一次归类：data.reduce((acc, item) => { const key = item.firstWord.toUpperCase(); (acc[key] = acc[key] || []).push(item); return acc; }, {}) - 字母导航栏用
<div class="letter-nav"><button data-letter="A">A</button></div>，点击后只scrollIntoView({ behavior: 'smooth' })到对应data-letter="A"的区块，不重绘整棵树 - 首字母区块用
IntersectionObserver懒加载：只有进入视口时才渲染该字母下的全部品牌项，大幅降低初始 DOM 节点数
真正难的不是写出来，而是让「点开二级」这个动作在 iOS Safari、Chrome Android、旧版微信内置浏览器里都一致——关键不在 JS 多炫酷，而在每层 event.stopPropagation() 是否漏掉、每个 data-loaded 是否准确同步、以及 CSS display 切换有没有被其他样式意外覆盖。
