layui左侧菜单栏鼠标悬停显示菜单文字功能实现
更新时间：2024年06月13日 10:50:46 作者：JagTom
layui封装的左侧菜单是固定宽度的,且左侧菜单栏在css里改变宽度,效果并不是很好（还设计头部菜单栏）,如果写js来让菜单栏能够拉伸,也比较麻烦,那怎么最简单的,让用户看到菜单的文字呢,下面给大家分享layui左侧菜单栏鼠标悬停显示菜单文字功能实现,感兴趣的朋友一起看看吧
layui封装的左侧菜单是固定宽度的，且左侧菜单栏在css里改变宽度，效果并不是很好（还设计头部菜单栏），如果写js来让菜单栏能够拉伸，也比较麻烦，那怎么最简单的，让用户看到菜单的文字呢。使用鼠标悬停事件：
显示效果，发现如果文字过多，会自动省略，能够鼠标悬停上去显示全部，才是用户想看到的效果。
给左侧菜单栏添加监控：
$('.layui-nav-child a').on({
mouseenter: function () {
var that = this;
var tips;
var fullText = that.textContent;
//console.log(that.textContent)
tips = layer.tips("<span style='color:#000;'>" + fullText + "</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
},
mouseleave: function () {
layer.close(tips);
}
});思路就是，先判断子菜单的通用属性，然后可以打印一下看看子菜单dom下有哪些属性，然后绑定显示 title菜单文字的属性即可；
到此这篇关于layui左侧菜单栏鼠标悬停显示菜单文字功能实现的文章就介绍到这了,更多相关layui鼠标悬停显示菜单文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了p5.js绘制旋转的正方形，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
这篇文章主要介绍了layer实现关闭弹出层刷新父界面功能,结合实例形式分析了使用layui的layer在关闭弹出层时刷新父界面的常用实现技巧与相关操作注意事项,需要的朋友可以参考下2017-11-11
ArrayBuffer Uint8Array Blob与文本字符相互转换示例
这篇文章主要为大家介绍了ArrayBuffer Uint8Array Blob与文本字符相互转换示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了介绍了多种避免他人调试前端代码的方法,包括通过不断使用debugger语句、将代码写在一行、检测浏览器窗口尺寸变化、使用定时器执行debugger语句、使用第三方插件disable-devtooldisable-devtool、禁止F12/审查开启控制台等,需要的朋友可以参考下2025-01-01
Three.js利用Detector.js插件如何实现兼容性检测详解
这篇文章主要给大家介绍了关于Three.js利用Detector.js插件如何实现兼容性检测的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-09-09
这篇文章主要介绍了JavaScript解析机制与闭包原理,结合实例形式详细分析了javascript解析机制相关概念、功能、用法以及闭包的原理、定义、使用方法,需要的朋友可以参考下2019-03-03
Javascript 阻止javascript事件冒泡，获取控件ID值
Javascript学习日记-阻止javascript事件冒泡，获取控件ID值2009-06-06
用js实现键盘方向键翻页功能的代码...2007-06-06
这篇文章主要介绍了原生js封装的ajax方法,结合实例形式分析了JavaScript封装ajax操作及调用方法相关操作技巧,非常简单实用,需要的朋友可以参考下2018-08-08
这篇文章主要为大家详细介绍了使用Javascript在HTML中显示实时时间，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论