快捷導(dǎo)航

layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn)

更新時(shí)間：2024年06月13日 10:50:46 作者：JagTom

layui封裝的左側(cè)菜單是固定寬度的,且左側(cè)菜單欄在css里改變寬度,效果并不是很好（還設(shè)計(jì)頭部菜單欄）,如果寫js來讓菜單欄能夠拉伸,也比較麻煩,那怎么最簡單的,讓用戶看到菜單的文字呢,下面給大家分享layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn),感興趣的朋友一起看看吧

layui封裝的左側(cè)菜單是固定寬度的，且左側(cè)菜單欄在css里改變寬度，效果并不是很好（還設(shè)計(jì)頭部菜單欄），如果寫js來讓菜單欄能夠拉伸，也比較麻煩，那怎么最簡單的，讓用戶看到菜單的文字呢。使用鼠標(biāo)懸停事件：

顯示效果，發(fā)現(xiàn)如果文字過多，會自動省略，能夠鼠標(biāo)懸停上去顯示全部，才是用戶想看到的效果。

給左側(cè)菜單欄添加監(jiān)控：

            $('.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菜單文字的屬性即可；

到此這篇關(guān)于layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)layui鼠標(biāo)懸停顯示菜單文字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

javaScript中indexOf用法技巧
在本篇文章里小編給大家整理的是一篇關(guān)于javaScript中indexOf用法技巧的相關(guān)文章，有需要的朋友們學(xué)習(xí)下。
2019-11-11
mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法
今天小編就為大家分享一篇mui js控制開關(guān)狀態(tài)、修改switch開關(guān)的值方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript實(shí)現(xiàn)為圖片添加水印的方法詳解
在很多地方，我們都可以看到，上傳圖片的時(shí)候，圖片都會被加上默認(rèn)的水印，因此，我們在個人網(wǎng)站進(jìn)行圖片操作時(shí)，也可以給它加上自己獨(dú)特的水印，本文就為大家整理了JS添加圖片合文字水印的方法，需要的可以參考一下
2023-05-05
Javascript oop設(shè)計(jì)模式面向?qū)ο缶幊毯唵螌?shí)例介紹
這篇文章主要介紹了Javascript oop設(shè)計(jì)模式面向?qū)ο缶幊毯唵螌?shí)例介紹的相關(guān)資料,這里附有實(shí)例代碼幫助大家學(xué)習(xí)理解，需要的朋友可以參考下
2016-12-12
JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)，JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對象（包括對象、數(shù)組等）時(shí)，是否只復(fù)制對象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個新的對象
2023-04-04
JavaScript實(shí)現(xiàn)簡單生成隨機(jī)顏色的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡單生成隨機(jī)顏色的方法,涉及javascript隨機(jī)數(shù)與字符串運(yùn)算及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-09-09
Ionic快速安裝教程
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。接下來小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個簡單的小應(yīng)用，感興趣的朋友一起看看吧
2016-06-06
利用JavaScript實(shí)現(xiàn)網(wǎng)頁版2048小游戲
這篇文章主要介紹了如何利用HTML+CSS+JS編寫一個網(wǎng)頁版的2048小游戲,代碼簡單易懂對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-11-11
axios實(shí)現(xiàn)取消請求的方法詳解
axios 是現(xiàn)在前端項(xiàng)目中最常使用的一個請求庫,目前 Github star 已經(jīng)達(dá)到了 104k star,本文我們討論的問題是axios 是如何實(shí)現(xiàn)取消請求（Cancel requests）的,文中有詳細(xì)的實(shí)現(xiàn)方法,感興趣的朋友可以參考下
2024-04-04
微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間進(jìn)度條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11