侧边菜单栏需用offcanvas（移动端）+col-3+position-sticky（PC端）双逻辑实现响应式折叠，搜索框固定于offcanvas顶部，菜单内容独立滚动，collapse控制层级展开，防抖渲染建议列表并确保z-index高于offcanvas。
侧边菜单栏怎么用 Bootstrap 实现响应式折叠
Bootstrap 5 默认不提供“带搜索建议的侧边菜单”这种组合组件，得自己拼——核心是用 offcanvas（移动端抽屉） + collapse（折叠菜单） + 自定义搜索逻辑。别指望一个 class 就搞定，响应式切换的关键在于断点控制和 DOM 结构隔离。
常见错误是把整个菜单塞进 offcanvas-body 后，又在内部硬加 form-control 搜索框，结果搜索框在小屏下被遮挡、键盘弹出后布局错乱。正确做法是：搜索框始终固定在 offcanvas 顶部，菜单内容区域单独滚动，且搜索建议列表必须脱离 offcanvas 的 overflow:hidden 限制（否则下拉建议被截断）。
- 移动端用
offcanvas，PC 端用col-3+position-sticky固定高度滚动 - 菜单项必须包裹在
div class="list-group"或ul class="nav flex-column"中，才能配合collapse正确触发展开/收起 - 不要给
offcanvas设置height: 100vh，改用max-height: 80vh并加overflow-y: auto，否则搜索建议浮层会被裁剪
搜索建议怎么动态渲染且不卡顿
建议列表不是靠 Bootstrap 的 dropdown，它不支持异步加载和关键词高亮。得用原生 input 监听 input 事件，手动渲染 ul 建议项，并用 position: absolute 浮在菜单上方。性能关键点在于防抖和 DOM 复用。
典型翻车场景：用户狂敲 “react”，每按一次键就发请求+重绘整个 ul，导致卡顿、建议延迟、甚至输入框失焦。必须加 setTimeout 防抖（300ms 合理），且只更新 innerHTML，别反复 removeChild + appendChild。
- 建议数据源优先走前端过滤（比如菜单项已全部加载），避免每次输都发 AJAX；真要后端查，务必加 loading 状态和 abortController
- 高亮关键词用
str.replace(new RegExp(keyword, 'gi'), '<mark>$&</mark>')，别用 innerHTML 拼接未转义字符串，防 XSS - 建议列表容器必须设
z-index: 1060（高于 offcanvas 的 1050），否则被盖住
如何让搜索建议点击后自动选中并展开对应菜单组
点击建议项时，不能只跳转链接，还要模拟用户点击左侧二级菜单的 toggle 按钮，触发 collapse 展开。关键是通过 data-target 或 href 属性反向定位到目标 div.collapse，再调用 bootstrap.Collapse.getInstance(el).show()。
容易忽略的是：如果目标 collapse 当前是隐藏状态，直接 show() 会闪一下；如果它属于某个已折叠的父级菜单（比如“开发工具”大类被收起来了），还得先展开父级。这时候得递归向上找最近的 .collapse.show 父容器。
- 每个菜单项的
a标签加data-menu-id="dev-tools-react"，对应下方div.collapse#dev-tools-react - 点击建议后执行：
document.querySelector(`[data-menu-id="${id}"]`).click()，比手动调 API 更可靠（兼容 data-bs-toggle） - 确保所有 collapse 元素都有唯一
id，且其触发按钮的data-bs-target或href值与之匹配
为什么在 iOS Safari 上搜索建议经常点不中
iOS Safari 对 position: absolute 浮层 + transform 动画的合成层处理有问题，尤其当 offcanvas 本身有 transform: translateX 时，建议列表的点击热区会偏移。这不是 Bug，是硬件加速渲染的副作用。
最稳解法是放弃 offcanvas 的默认 transform 动画，改用 left: 0 + transition: left .3s，同时给建议容器加 will-change: transform 强制新建图层。但更实际的做法是：检测 iOS，禁用 offcanvas 的 transform，改用 margin-left 切换。
- 用
navigator.userAgent.includes('iPhone')粗略判断，别用 Modernizr - 给
.offcanvas加 classios-no-transform，CSS 里写：.ios-no-transform { transform: none; left: -100%; transition: left .3s; } - 建议列表的
top计算必须用getBoundingClientRect().bottom，别依赖 offsetTop，iOS 下 offsetTop 经常不准
