layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn)
更新時(shí)間：2024年06月13日 10:50:46 作者：JagTom
layui封裝的左側(cè)菜單是固定寬度的,且左側(cè)菜單欄在css里改變寬度,效果并不是很好（還設(shè)計(jì)頭部菜單欄）,如果寫(xiě)js來(lái)讓菜單欄能夠拉伸,也比較麻煩,那怎么最簡(jiǎn)單的,讓用戶看到菜單的文字呢,下面給大家分享layui左側(cè)菜單欄鼠標(biāo)懸停顯示菜單文字功能實(shí)現(xiàn),感興趣的朋友一起看看吧
layui封裝的左側(cè)菜單是固定寬度的，且左側(cè)菜單欄在css里改變寬度，效果并不是很好（還設(shè)計(jì)頭部菜單欄），如果寫(xiě)js來(lái)讓菜單欄能夠拉伸，也比較麻煩，那怎么最簡(jiǎn)單的，讓用戶看到菜單的文字呢。使用鼠標(biāo)懸停事件：
顯示效果，發(fā)現(xiàn)如果文字過(guò)多，會(huì)自動(dòng)省略，能夠鼠標(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能詳解
這篇文章主要介紹了layer實(shí)現(xiàn)關(guān)閉彈出層刷新父界面功能,結(jié)合實(shí)例形式分析了使用layui的layer在關(guān)閉彈出層時(shí)刷新父界面的常用實(shí)現(xiàn)技巧與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2017-11-11
ArrayBuffer Uint8Array Blob與文本字符相互轉(zhuǎn)換示例
這篇文章主要為大家介紹了ArrayBuffer Uint8Array Blob與文本字符相互轉(zhuǎn)換示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了介紹了多種避免他人調(diào)試前端代碼的方法,包括通過(guò)不斷使用debugger語(yǔ)句、將代碼寫(xiě)在一行、檢測(cè)瀏覽器窗口尺寸變化、使用定時(shí)器執(zhí)行debugger語(yǔ)句、使用第三方插件disable-devtooldisable-devtool、禁止F12/審查開(kāi)啟控制臺(tái)等,需要的朋友可以參考下2025-01-01
Three.js利用Detector.js插件如何實(shí)現(xiàn)兼容性檢測(cè)詳解
這篇文章主要給大家介紹了關(guān)于Three.js利用Detector.js插件如何實(shí)現(xiàn)兼容性檢測(cè)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-09-09
JavaScript解析機(jī)制與閉包原理實(shí)例詳解
這篇文章主要介紹了JavaScript解析機(jī)制與閉包原理,結(jié)合實(shí)例形式詳細(xì)分析了javascript解析機(jī)制相關(guān)概念、功能、用法以及閉包的原理、定義、使用方法,需要的朋友可以參考下2019-03-03
Javascript 阻止javascript事件冒泡，獲取控件ID值
Javascript學(xué)習(xí)日記-阻止javascript事件冒泡，獲取控件ID值2009-06-06
用js實(shí)現(xiàn)鍵盤(pán)方向鍵翻頁(yè)功能的代碼
用js實(shí)現(xiàn)鍵盤(pán)方向鍵翻頁(yè)功能的代碼...2007-06-06
這篇文章主要介紹了原生js封裝的ajax方法,結(jié)合實(shí)例形式分析了JavaScript封裝ajax操作及調(diào)用方法相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-08-08
使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
這篇文章主要為大家詳細(xì)介紹了使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06