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