在使用Layui动态添加导航条时，常遇到渲染失效的问题。本文介绍通过DOM操作提前删除已生成的span.layui-nav-bar样式元素，随后重新调用element.render方法进行渲染，从而解决动态内容无法正确显示的效果。
Layui导航动态渲染问题与解决思路
今日在使用Layui构建导航条时，发现动态添加内容后无法再次正确渲染效果。具体原因虽未明确，但已找到解决方案：通过DOM操作预先删除Layui渲染生成的span.layui-nav-bar样式元素，随后重新执行渲染逻辑。具体效果可参考相关截图。
<ul class="layui-nav" id="nav" layui-filter="test"></ul>相关JS代码实现如下：
动态添加导航条的JS代码实现
$(function () {
$.ajax({
url: '/Main/GetType1',
success: function (da) {
//重点地方，将Layui在页面加载时渲染出来的span.layui-nav-bar提前删除掉
$("#nav").find('span.layui-nav-bar').remove();
$.each(da, function (index, value) {
var name = da[index]['name'];
var id=da[index]['id'];
var $li = $("<li class='layui-nav-item' id='t"+id+"'><a href='javascript:;'>" + name + "</a></li>");
$("#nav").append($li);
//addul("t" + id, id);
})
//列表添加完后再次执行渲染
xuanran();
}
})
})
function xuanran() {
layui.use('element', function () {
var element = layui.element;
var layFilter = $("#nav").attr('lay-filter');
element.render('nav', layFilter);
})
}通过上述步骤即可解决该问题。
以上关于解决Layui导航条动态添加后渲染失败的方法即为全部内容，希望能为读者提供参考，并欢迎支持本站。