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中indexOf用法技巧的相关文章，有需要的朋友们学习下。2019-11-11
今天小编就为大家分享一篇mui js控制开关状态、修改switch开关的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
在很多地方，我们都可以看到，上传图片的时候，图片都会被加上默认的水印，因此，我们在个人网站进行图片操作时，也可以给它加上自己独特的水印，本文就为大家整理了JS添加图片合文字水印的方法，需要的可以参考一下2023-05-05
Javascript oop设计模式 面向对象编程简单实例介绍
这篇文章主要介绍了Javascript oop设计模式 面向对象编程简单实例介绍的相关资料,这里附有实例代码帮助大家学习理解，需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现，JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象2023-04-04
这篇文章主要介绍了JavaScript实现简单生成随机颜色的方法,涉及javascript随机数与字符串运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2017-09-09
Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它 提供了很多 UI 组件来帮助开发者开发强大的应用。接下来小编给大家介绍如何安装 Ionic 在自己的电脑上搭建一个简单的小应用，感兴趣的朋友一起看看吧2016-06-06
这篇文章主要介绍了如何利用HTML+CSS+JS编写一个网页版的2048小游戏,代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-11-11
axios 是现在前端项目中最常使用的一个请求库,目前 Github star 已经达到了 104k star,本文我们讨论的问题是axios 是如何实现取消请求（Cancel requests）的,文中有详细的实现方法,感兴趣的朋友可以参考下2024-04-04
这篇文章主要为大家详细介绍了微信小程序实现时间进度条功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论