解决Layui导航条动态添加后渲染失败的问题
作者:小满时间:2026-10-23 11:32:02浏览:366
在使用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导航条动态添加后渲染失败的方法即为全部内容,希望能为读者提供参考,并欢迎支持本站。
作者最新文章
JS空字符串、null和undefined转数字的结果是什么
2026-11-05 14:49:16
CodePen、JSFiddle与StackBlitz:主流JS在线编辑器对比
2026-11-05 13:38:29
JS怎么将时间戳转换为“刚刚”、“几分钟前”等相对时间
2026-11-05 12:55:14
JavaScript将儒略日逆向还原为公历日期时间的实现方法
2026-11-04 23:51:05
能在我的世界手机版直接修改JS代码吗
2026-11-04 19:02:53
