首頁 > 開發者 > JavaScript
jQuery側邊欄實現代碼，jQuery欄實現代碼
先給大家展示下實現，如果親感覺是您想要的效果，請參考本代碼。
實現代碼如下所示：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript菜單側邊展開(改良版)</title></head><body><ul id="navigation"><li><a href="#">系統管理</a><ul><li><a href="#">地區設定</a></li><li><a href="#">分行設定</a></li><li><a href="#">銀行操作使用者佈建</a></li><li><a href="#">密碼修改</a></li></ul></li><li><a href="#">學校管理</a><ul><li><a href="#">學校設定</a></li><li><a href="#">學校查詢</a></li></ul></li><li><a href="#">基礎資訊管理</a></li><li><a href="#">統計系統查詢</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側邊欄代碼，希望對大家有所協助！同時也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
