同一页面渲染多个独立水平导航需隔离实例、避免选择器冲突、各自管理数据与状态；须用navbar.render()分别初始化唯一容器，传入独立data和配置，并通过自定义class、禁用默认事件、独立激活逻辑实现解耦。
同一页面渲染多个独立的水平导航，关键在于**隔离实例、避免选择器冲突、各自管理数据与状态**。Layui 的 layui.navbar() 默认不支持多实例共存，直接多次调用会相互覆盖或只生效最后一个。必须通过“手动初始化 + 独立容器 + 显式绑定”来实现。
每个导航需有唯一容器和独立配置
不能共用同一个 <ul class="layui-nav"> 或相同 ID/类名容器。每个导航必须：
- 使用独立的 DOM 容器，例如：
<ul id="nav-header"></ul>、<ul id="nav-user"></ul> - 分别调用
navbar.render()（注意：不是navbar()），并传入各自的elem和data - 确保每个
elem是唯一可选中的原生 DOM 元素（推荐用document.getElementById()）
用 navbar.render() 替代全局 navbar()
layui.navbar() 是旧式全局调用，仅适配单个默认导航；而 navbar.render(options) 是 Layui 2.7+ 推荐的实例化方式，支持多实例：
-
elem：必填，指向该导航的根容器（如document.getElementById('nav-header')） -
data：必填，每个导航的数据独立传入，互不影响 -
skin、showTop等配置可按需差异化设置 - 不要设置相同的
filter值，否则事件监听会混用
避免 hover/点击行为互相干扰
多个水平导航共存时，Layui 的 element 模块默认会对所有 .layui-nav 统一处理 hover 和点击。需主动解耦：
- 初始化前，先用
layui.element.init()清除已有 nav 绑定（谨慎操作） - 更稳妥做法：给每个导航加自定义 class（如
layui-nav-header、layui-nav-user），并在 CSS 中覆盖默认 hover 样式，避免级联影响 - 若需点击跳转，禁用默认行为：
elem.onclick = e => e.preventDefault()，再自行处理逻辑
数据与激活态各自维护
每个导航的当前高亮项（layui-this）必须独立判断，不能共用 URL 匹配逻辑：
- 为每个导航单独写匹配函数，读取各自
data中的href，与当前location.pathname去斜杠后比对 - 三级菜单展开态（
layui-nav-itemed）也要按容器范围查找父级，不可跨容器冒泡 - 建议在
navbar.render()的done回调中执行激活逻辑，确保 DOM 已渲染完成
