先給大家展示下實(shí)現(xiàn)效果圖，如果親感覺(jué)是您想要的效果，請(qǐng)參考本代碼。
實(shí)現(xiàn)代碼如下所示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript菜單側(cè)邊展開(kāi)(改良版)</title></head><body><ul id="navigation"><li><a href="#">系統(tǒng)管理</a><ul><li><a href="#">地區(qū)設(shè)置</a></li><li><a href="#">分行設(shè)置</a></li><li><a href="#">銀行操作用戶設(shè)置</a></li><li><a href="#">密碼修改</a></li></ul></li><li><a href="#">學(xué)校管理</a><ul><li><a href="#">學(xué)校設(shè)置</a></li><li><a href="#">學(xué)校查詢</a></li></ul></li><li><a href="#">基礎(chǔ)信息管理</a></li><li><a href="#">統(tǒng)計(jì)系統(tǒng)查詢</a></li></ul><script src="jquery-1.11.1.js"></script><script>var $j = jQuery.noConflict();$j(function(){var lis = document.getElementById("navigation").getElementsByTagName("li");for (var i=0; i<lis.length; i++) {lis[i].onmouseover=function() {var subMenu = this.getElementsByTagName("ul")[0];subMenu.style.display = "block";var subcolor = this.getElementsByTagName("a")[0];subcolor.style.background = "lightblue";}lis[i].onmouseout=function() {var subMenu = this.getElementsByTagName("ul")[0];subMenu.style.display = "none";var subcolor = this.getElementsByTagName("a")[0];subcolor.style.background = "";}}});</script><script src="jquery-1.11.1.js"></script></body></html>以上是本文給大家介紹的jquery側(cè)邊欄代碼，希望對(duì)大家有所幫助！同時(shí)也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
