layui下拉菜单的按钮组(数据表格表头版)
最近工作中需要使用layui在数据表格的表头工具栏里添加一个下拉按钮组,layui目前还没有开发出相关的功能,所以需要自己手动拼写,在参考了博友们的部分文章后,做了一部分的改动,实现了基本的需求,即下拉按钮组,点击切换功能,注意是需要通过点击进行下拉展示和收起,也就是div的隐藏和显示,实现的思路其实比较简单,博友们如果有更好的方式欢迎留言
html:
<script type="text/html" id="toolbar">
<button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</button>
<ul class="layui-nav layui-bg-blue btnz" lay-filter="" style="font-size: 12px;border-radius: 0px;float: right;padding:0px 0px 0px 0px;margin-left: 2px;">
<li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
<a style="color:white;font-size: 12px;padding: 2px 30px 3px 20px;letter-spacing:1px;" id="exportClick">导出<span class="layui-nav-more" style="right: 10px;font-size: 12px;" ></span></a>
<dl class="layui-nav-child" style="top: 30px;line-height: 30px;padding: 0px 0px 0px 0px;" id="exportEncrypt"> <!-- 二级菜单 -->
<dd>
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" id="exportPerson" lay-event="exportPerson">个人</button>
</dd>
<dd>
<button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" id="exportUnit" lay-event="exportUnit">单位</button>
</dd>
</dl>
</li>
</ul>
</script>
js:
$("#exportClick").click(function(e) {
$("#exportEncrypt").toggle();
});
效果:
附:本人参考另一位博主的方法:https://blog.csdn.net/qq493820798/article/details/89963957