js向ul标签添加li并且li标签有修改删除按钮
Layui当中的导航条动态添加
效果:
1、html放置ul标签
<ul class="layui-nav" id="nav" layui-filter="test"></ul>/
2、js编写代码动态添加li
<script type="text/javascript"> function playlistustree() { var url = "/extavs/Avs_Call/getplayList"; //调用api获取数据 ushttp.UsAjaxJSONV2(url, "", false, false, function (d) { console.error(d); if (d.code == 0) { //$("#nav").find('span.layui-nav-bar').remove(); var da = d.results.data; //遍历数据动态添加li $.each(da, function (index, value) { var name = da[index]['name']; var id = da[index]['id']; var $li = "<li class='layui-menu-item-divider' id='l" + id + "'><div class='li'><div class='lia'><a class='lianame' id='a" + id + "' onclick=getplayItem('" + id + "')>" + name + "</a></div><div class='aul'><a class= 'updnote' onclick =updplayList('" + id + "','" + name + "')> <i class='us-icon' style='color:#1e9fff'></i></a ><a class='deltnote' onclick=delplayList('" + id + "','" + name + "')><i class='us-icon' style='color:rgb(245, 108, 108)'></i></a></div></div></li>"; $("#nav").append($li); }) //列表添加完后再次执行渲染 xuanran(); } else { usbasic.errorMsg(d.msg); } }); } </script>
function xuanran() { layui.use('element', function () { var element = layui.element; var layFilter = $("#nav").attr('lay-filter'); element.render('nav', layFilter); }) }
3、css样式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<style> //ul盒子样式 .layui-nav { position: relative; padding: 0px 0px 0px 0px; margin-top: 10px; height: 250px; /* background-color: #393D49; */ color: #fff; border-radius: 2px; font-size: 0; box-sizing: border-box; } //修改删除按钮右侧浮动 .layui-nav .aul { float: right; } //列表名左侧浮动 .layui-nav .lia { width: 60%; float: left; } .layui-nav .aul .updnote { margin-right: 10px; } .layui-nav .layui-menu-item-divider { margin: 10px 0px 0px 10px; height: 20px; } //添加滚动条 .ldiv3 .playlistusul { height: 250px; /*overflow-y: overlay;*/ /*overflow-y: hidden;*/ overflow: auto; } </style>CSS
4、点击对应列表名、名变色
(li的onclick点击事件中对标签名设置样式 ,根据id获取点击li设置为蓝色,提前通过类获取标签将全部li设置为黑色)
$(".lianame").css("color", "black"); $("#a" + id).css("color", "#1e9fff");
变色效果: