动态更新导航菜单徽章数字需精准修改对应DOM节点文本，确保徽章嵌套在内并设唯一标识（如id="nav-msg"），用document.querySelector或jQuery定位更新，避免全局选择器误改。
动态更新导航菜单中徽章（Badge）的数字，关键不是“重绘整个菜单”，而是精准定位并修改对应 DOM 节点内的文本内容。Layui 的 layui-badge 是纯样式类，不依赖模块初始化，所以更新时只需操作 innerText 或 textContent 即可，无需调用额外渲染方法。
确保徽章在正确位置
徽章必须嵌套在 <a> 标签内部，且紧贴文字右侧，例如：
如果徽章写在 <a> 外（如放在 <li> 里），会导致点击区域错位、折叠时被裁剪、移动端显示异常等问题。
给目标菜单加唯一标识
避免全局误改，必须为需要动态更新的菜单项设置唯一标记，推荐两种方式：
- 在
<a>上添加id="nav-msg"（最直接） - 或添加自定义属性如
data-type="notice"（更灵活，适合多同类项）
示例：
<a href="#" id="nav-msg">通知<span class="layui-badge">0</span></a>
用原生 JS 或 jQuery 更新数字
更新动作应在 Layui 初始化完成之后执行（即 layui.use(['element'], callback) 内），确保 DOM 已就绪：
- 原生写法：
document.querySelector('#nav-msg .layui-badge').innerText = '5'; - jQuery 写法：
$('#nav-msg').find('.layui-badge').text(5);
⚠️ 注意：不要用 $('.layui-badge').text(5) 这类全局选择器——多个菜单都带徽章时会全部被覆盖。
配合业务逻辑做条件更新
比如只在有新消息时显示，无则隐藏徽章：
- 显示数字：
elem.innerText = count > 0 ? String(count) : ''; - 显示 “99+”：
elem.innerText = count > 99 ? '99+' : String(count); - 完全移除徽章节点（非仅清空文字）：
elem.remove();，前提是该<span>没被其他逻辑强依赖
颜色和尺寸若需响应状态，可同步切换 class 或内联样式，例如：elem.className = 'layui-badge layui-badge-warning';
