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鼠标悬停显示菜单文字内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了Webpack中雪碧图插件使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
这篇文章主要介绍了基于layer.js实现收货地址弹框选择然后返回相应的地址信息,需要的朋友可以参考下2017-05-05
这篇文章主要介绍了微信小程序 swiper组件轮播图详解及实例的相关资料,需要的朋友可以参考下，希望能给你带来帮助2021-08-08
这篇文章主要介绍了JavaScript中使用Callback控制流程介绍,本文讲解了callback的一些问题和优化后的写法并给出代码实例,需要的朋友可以参考下2015-03-03
waypoints的功能非常强大，一款用于捕获各种滚动事件的插件，下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧2017-09-09
这篇文章主要为大家介绍了ESLint和Jest中使用esm示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了JavaScript中ES6 Babel正确安装过程的相关资料,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了JavaScript 九种跨域方式实现原理，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
在 Canvas 中,基本图形包括直线图形和曲线图形,在我们的工作中,经常在统计图中会看到有饼状图等这样的圆弧图形,当然绘制曲线图形那么我们要知道曲线图形的绘制往往会涉及到曲线与弧线,所以本文就给大家介绍一下Canvas绘制圆与半圆的方法2023-08-08
最新评论