前言
基于jquery和layui的更多按钮操作，在表格中表头和表行有时候按钮操作过多的时候我们就需要使用折叠操作了，实现方式如下
实现
如果是老版本layui，是没有下拉组件dropdown的
前往下载（包括使用方式）：https://www.microanswer.cn/blog/74
【此组件和下面方式有所不同，使用此组件前往路径中的文档即可】
解压后得到
注意这里的css路径，如果不用外网的，就改成本地解压的dropdown.css即可
引入组件
方式一
由于官方给的，和其他框架带的修改起来不方便就自己写了一种，复制过去就可以使用
效果图
css中
.lay-btn-all .layui-icon{
display: inline-block;
transition: all 0.3s;
-webkit-transition: all 0.3s;
font-size: 14px!important;
}
.lay-icon-this{
transform: rotate(180deg);
}
.lay-nav-child{
display: none;
background: #ffff;
width: 140px;
text-align: center;
position: absolute;
margin-top: 5px;
box-shadow: #5a5858 0px 0px 1px 0px;
border-radius: 5px;
}
.lay-nav-child-show{
display: block;
}
.lay-nav-child dd{
padding: 10px;
}
.lay-nav-child .layui-btn{
margin: 5px 0px;
width: 100%;
}
JS中
方式一
这个是使用移入移开方式的，方式二是点击的（推荐方式二）
$(function(){
// 更多按钮操作事件==========================================================================
// 更多-鼠标放入事件
$(document).on("mouseover", ".lay-btn-all", function(ev){
// 防止子级元素阻挡事件造成失效
var oEvent = ev || window.event;
if(toAffect(this, oEvent, 'mouseover')){
var cls = $(".lay-nav-child").attr("class");
if(cls.indexOf("lay-nav-child-show") == -1){
$(this).find(".layui-icon").addClass("lay-icon-this");
$(this).next(".lay-nav-child").addClass("lay-nav-child-show");
}
}
})
// 更多-鼠标移开事件
$(document).on("mouseout", ".lay-btn-all", function(ev){
// 防止子级元素阻挡事件造成失效
var oEvent = ev || window.event;
if(toAffect(this, oEvent, 'mouseout')){
var y_$this = $(this);
setTimeout(function(){
var id = y_$this.next(".lay-nav-child").attr("lay-id");
if(!id || id == 0){
y_$this.find(".layui-icon").removeClass("lay-icon-this");
y_$this.next(".lay-nav-child").removeClass("lay-nav-child-show");
}
}, 500);
}
})
// 隐藏按钮-鼠标放入事件
$(document).on("mouseover", ".lay-nav-child", function(ev){
// 防止子级元素阻挡事件造成失效
var oEvent = ev || window.event;
if(toAffect(this, oEvent, 'mouseover')){
var id = $(this).attr("lay-id");
if(id != 1){
$(this).attr("lay-id", 1);
}
}
})
// 隐藏按钮-鼠标移开事件
$(document).on("mouseout", ".lay-nav-child", function(ev){
// 防止子级元素阻挡事件造成失效
var oEvent = ev || window.event;
if(toAffect(this, oEvent, 'mouseout')){
$(this).removeClass("lay-nav-child-show");
$(this).attr("lay-id", 0);
$(this).prev(".lay-btn-all").find(".layui-icon").removeClass("lay-icon-this");
}
})
// 点击body关闭更多按钮，及点击按钮不做关闭操作=====================================================================
$("body").click(function(ev){
var e = ev || window.event;
var target = e.target || e.srcElement;
if(target.className.indexOf("lay-btn-all") != -1 || target.className.indexOf("lay-nav-child") != -1) {
return;
}else{
var y_$this = $(".lay-btn-all");
var id = y_$this.next(".lay-nav-child").attr("lay-id");
if(!id || id == 0){
y_$this.find(".layui-icon").removeClass("lay-icon-this");
y_$this.next(".lay-nav-child").removeClass("lay-nav-child-show");
}
}
})
})
/**
* --------------------------------------------------------------------------------------
* 父级移入移出事件阻止子级元素遮挡后失效
* @param {Object} obj1
* @param {Object} ev
* @param {Object} event
*/
function toAffect(obj1, ev, event){
var obj2 = null;
if(ev.relatedTarget){
obj2 = ev.relatedTarget;
}else{
if(event == 'mouseover'){
obj2 = ev.fromElement;
} else if(event == 'mouseout'){
obj2 = ev.toElement;
}
}
if(obj1.contains){
return !obj1.contains(obj2);
}else{
return !!(obj1.compareDocumentPosition(obj2)-20)&&a!=b;
}
}
方式二
$(function(){
// 更多按钮操作事件==========================================================================
// 更多-鼠标点击事件
$(document).on("click", ".lay-btn-all", function(ev){
var cls = $(".lay-nav-child").attr("class");
if(cls.indexOf("lay-nav-child-show") == -1){
$(this).find(".layui-icon").addClass("lay-icon-this");
$(this).next(".lay-nav-child").addClass("lay-nav-child-show");
}
})
// 隐藏按钮-鼠标点击事件=======================================================================================
$(document).on("click", ".lay-nav-child", function(ev){
$(this).removeClass("lay-nav-child-show");
$(this).prev(".lay-btn-all").find(".layui-icon").removeClass("lay-icon-this");
})
// 点击body关闭更多按钮，及点击按钮不做关闭操作=====================================================================
$("body").click(function(ev){
var e = ev || window.event;
var target = e.target || e.srcElement;
if(target.className.indexOf("lay-btn-all") != -1 || target.className.indexOf("lay-nav-child") != -1) {
return;
}else{
var y_$this = $(".lay-btn-all");
var id = y_$this.next(".lay-nav-child").attr("lay-id");
if(!id || id == 0){
y_$this.find(".layui-icon").removeClass("lay-icon-this");
y_$this.next(".lay-nav-child").removeClass("lay-nav-child-show");
}
}
})
})
html中
<div id="toolberLeft" style="display:none;">
<a class="layui-btn layui-btn-sm lay-btn-all">
更多操作
<i class="layui-icon layui-icon-down layui-nav-more"></i>
</a>
<dl class="lay-nav-child layui-anim layui-anim-upbit">
<dd>
<button class="layui-btn layui-btn-sm" lay-event="add">
<i class="layui-icon layui-icon-add-circle"></i>新增
</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">
<i class="layui-icon layui-icon-edit"></i>编辑
</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">
<i class="layui-icon layui-icon-delete"></i>删除
</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="search">
<i class="layui-icon layui-icon-search" style="padding-left:5px;"></i>查询
</button>
</dd>
</dl>
</div>
此操作用于动态表格头部
tableId=table.render({
elem: '#table_data'
,height : 'full-120'
,skin:'line'
,even:true
,url: ''
,page: true //开启分页
,size:"sm"
,toolbar : "#toolberLeft"
})
方式二
【本人修改版】效果图
表格模式下，我这里使用userId做唯一【本人修改版】
<!-- 表格操作列 -->
<script type="text/html" id="app-table-bar">
<a class="layui-btn layui-btn-xs" data-dropdown="#userTbDrop_{{d.userId}}" no-shade="true">更多<i
class="layui-icon layui-icon-drop"></i></a>
<ul class="dropdown-menu-nav dropdown-bottom-right layui-hide " id="userTbDrop_{{d.userId}}">
<li><button class="layui-btn layui-btn-xs" lay-event="edit">修改</button></li>
<li><button class="layui-btn layui-btn-xs" lay-event="reset-pwd">重置密码</button></li>
<li><button class="layui-btn layui-btn-xs" lay-event="del">删除</button></li>
<li><button class="layui-btn layui-btn-xs" lay-event="power">授权</button></li>
</ul>
</script>
【原版】效果图
原版标签
<script type="text/html" id="app-table-bar">
<ul class="dropdown-menu-nav dropdown-bottom-right layui-hide " id="userTbDrop_{{d.userId}}">
{{# if(d.realAuth!=1){ }}
<li><a lay-event="rz"><i class="layui-icon layui-icon-star"></i>实名认证</a></li>
{{# } }}
<li><a lay-event="yy"><i class="layui-icon layui-icon-engine"></i>订购管理</a></li>
</ul>
</script>
这是我修改的样式【本人修改版使用】
.dropdown-menu-nav .layui-btn{
width: 100%;
}
.dropdown-menu-nav li{
padding: 2px 4px;
}
layui引入【通用】
表格js【通用】
注：我这里使用的是Ruo Yi框架
说明：不仅可以用在表格中，可以把标签块拿出来使用，主要是标签ID唯一
镜像官网例子：https://zengjin.work/layui/web/demo/dropdown.html
相关组件：https://www.microanswer.cn/blog/74
方式三
当然，也可以使用这种方式，需要稍微改一下样式
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="javascript:;">子级</a>
<dl class="layui-nav-child">
<dd><a href="">菜单1</a></dd>
<dd><a href="">菜单2</a></dd>
<dd><a href="">菜单3</a></dd>
</dl>
</li>
</ul>
1538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
