一个简单的树形菜单

来源：互联网发布：2017软考程序员答案编辑：程序博客网时间：2024/04/28 08:38

树形菜单

一、效果图

二、页面

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>树形菜单</title><link href="../css/tree.css" type="text/css" rel="stylesheet"><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="../js/jquery-1.8.3.min.js"></script><script src="../js/jquery-2.1.0.min.js"></script><script src="../js/tree.js"></script></head><body><div id="tree" style="width: 20%;"></div><script type="text/javascript">var treeTestData = [{'menuName': "导航菜单",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-arrow-right'}, {'menuName': "用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user','menuChildData': [{'menuName': "老师管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "前台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "后台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user','menuChildData': [{'menuName': "老师管理",'menuUrl': "teacher.html",}, {'menuName': "前台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "后台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user','menuChildData': [{'menuName': "老师管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "前台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "后台用户管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}]}]}]}, {'menuName': "广告管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-picture'}, {'menuName': "资讯管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-film'}, {'menuName': "角色管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-user'}, {'menuName': "模块管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-cog'}, {'menuName': "意见反馈管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-envelope'}, {'menuName': "礼物管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-gift'}, {'menuName': "房间管理",'menuUrl': "teacher.html",'menuLeftIcon': 'glyphicon glyphicon-calendar'}];$(function() {var tree = {'data': treeTestData,'clickIconBefore': 'glyphicon glyphicon-chevron-down','clickIconAfter': 'glyphicon glyphicon-chevron-up'}getTree($("#tree"), tree);});</script></body></html>

三、样式 tree.css

html,body {padding: 0 0;margin: 0 0;}@media (min-width: 768px) {.nav-tabs.nav-justified> li> a {border-bottom: 1px solid #ddd;border-radius: 4px 4px 0 0;}.nav-tabs.nav-justified> .active> a,.nav-tabs.nav-justified> .active> a:hover,.nav-tabs.nav-justified> .active> a:focus {border-bottom-color: #fff;}}.nav-pills> li {float: left;}.nav-pills> li> a {border-radius: 4px;}/*.nav-pills > li + li {  margin-left: 2px;}*/.nav {padding-left: 0;margin-bottom: 0;list-style: none;}.nav> li {position: relative;display: block;}.nav > li > a {position: relative;display: block;padding: 10px 15px;}.nav > li > a:hover,.nav > li > a:focus {  text-decoration: none;  background-color: #eee;}.nav> li.disabled> a {color: #777;}.nav> li.disabled> a:hover,.nav> li.disabled> a:focus {color: #777;text-decoration: none;cursor: not-allowed;background-color: transparent;}.nav .open> a,.nav .open> a:hover,.nav .open> a:focus {background-color: #eee;border-color: #428bca;}.nav .nav-divider {height: 1px;margin: 9px 0;overflow: hidden;background-color: #e5e5e5;}.nav> li> a> img {max-width: none;}.nav-pills> li.active> a,.nav-pills> li.active> a:hover,.nav-pills> li.active> a:focus {color: #fff;background-color: #428bca;}a.list-group-item.active> .badge,.nav-pills> .active> a> .badge {color: #428bca;background-color: #fff;}.nav-pills> li> a> .badge {margin-left: 3px;}@font-face {font-family: 'Glyphicons Halflings';src: url('../fonts/glyphicons-halflings-regular.eot');src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}.glyphicon {position: relative;top: 1px;display: inline-block;font-family: 'Glyphicons Halflings';font-style: normal;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.glyphicon-asterisk:before {content: "\2a";}.glyphicon-plus:before {content: "\2b";}.glyphicon-euro:before,.glyphicon-eur:before {content: "\20ac";}.glyphicon-minus:before {content: "\2212";}.glyphicon-cloud:before {content: "\2601";}.glyphicon-envelope:before {content: "\2709";}.glyphicon-pencil:before {content: "\270f";}.glyphicon-glass:before {content: "\e001";}.glyphicon-music:before {content: "\e002";}.glyphicon-search:before {content: "\e003";}.glyphicon-heart:before {content: "\e005";}.glyphicon-star:before {content: "\e006";}.glyphicon-star-empty:before {content: "\e007";}.glyphicon-user:before {content: "\e008";}.glyphicon-film:before {content: "\e009";}.glyphicon-th-large:before {content: "\e010";}.glyphicon-th:before {content: "\e011";}.glyphicon-th-list:before {content: "\e012";}.glyphicon-ok:before {content: "\e013";}.glyphicon-remove:before {content: "\e014";}.glyphicon-zoom-in:before {content: "\e015";}.glyphicon-zoom-out:before {content: "\e016";}.glyphicon-off:before {content: "\e017";}.glyphicon-signal:before {content: "\e018";}.glyphicon-cog:before {content: "\e019";}.glyphicon-trash:before {content: "\e020";}.glyphicon-home:before {content: "\e021";}.glyphicon-file:before {content: "\e022";}.glyphicon-time:before {content: "\e023";}.glyphicon-road:before {content: "\e024";}.glyphicon-download-alt:before {content: "\e025";}.glyphicon-download:before {content: "\e026";}.glyphicon-upload:before {content: "\e027";}.glyphicon-inbox:before {content: "\e028";}.glyphicon-play-circle:before {content: "\e029";}.glyphicon-repeat:before {content: "\e030";}.glyphicon-refresh:before {content: "\e031";}.glyphicon-list-alt:before {content: "\e032";}.glyphicon-lock:before {content: "\e033";}.glyphicon-flag:before {content: "\e034";}.glyphicon-headphones:before {content: "\e035";}.glyphicon-volume-off:before {content: "\e036";}.glyphicon-volume-down:before {content: "\e037";}.glyphicon-volume-up:before {content: "\e038";}.glyphicon-qrcode:before {content: "\e039";}.glyphicon-barcode:before {content: "\e040";}.glyphicon-tag:before {content: "\e041";}.glyphicon-tags:before {content: "\e042";}.glyphicon-book:before {content: "\e043";}.glyphicon-bookmark:before {content: "\e044";}.glyphicon-print:before {content: "\e045";}.glyphicon-camera:before {content: "\e046";}.glyphicon-font:before {content: "\e047";}.glyphicon-bold:before {content: "\e048";}.glyphicon-italic:before {content: "\e049";}.glyphicon-text-height:before {content: "\e050";}.glyphicon-text-width:before {content: "\e051";}.glyphicon-align-left:before {content: "\e052";}.glyphicon-align-center:before {content: "\e053";}.glyphicon-align-right:before {content: "\e054";}.glyphicon-align-justify:before {content: "\e055";}.glyphicon-list:before {content: "\e056";}.glyphicon-indent-left:before {content: "\e057";}.glyphicon-indent-right:before {content: "\e058";}.glyphicon-facetime-video:before {content: "\e059";}.glyphicon-picture:before {content: "\e060";}.glyphicon-map-marker:before {content: "\e062";}.glyphicon-adjust:before {content: "\e063";}.glyphicon-tint:before {content: "\e064";}.glyphicon-edit:before {content: "\e065";}.glyphicon-share:before {content: "\e066";}.glyphicon-check:before {content: "\e067";}.glyphicon-move:before {content: "\e068";}.glyphicon-step-backward:before {content: "\e069";}.glyphicon-fast-backward:before {content: "\e070";}.glyphicon-backward:before {content: "\e071";}.glyphicon-play:before {content: "\e072";}.glyphicon-pause:before {content: "\e073";}.glyphicon-stop:before {content: "\e074";}.glyphicon-forward:before {content: "\e075";}.glyphicon-fast-forward:before {content: "\e076";}.glyphicon-step-forward:before {content: "\e077";}.glyphicon-eject:before {content: "\e078";}.glyphicon-chevron-left:before {content: "\e079";}.glyphicon-chevron-right:before {content: "\e080";}.glyphicon-plus-sign:before {content: "\e081";}.glyphicon-minus-sign:before {content: "\e082";}.glyphicon-remove-sign:before {content: "\e083";}.glyphicon-ok-sign:before {content: "\e084";}.glyphicon-question-sign:before {content: "\e085";}.glyphicon-info-sign:before {content: "\e086";}.glyphicon-screenshot:before {content: "\e087";}.glyphicon-remove-circle:before {content: "\e088";}.glyphicon-ok-circle:before {content: "\e089";}.glyphicon-ban-circle:before {content: "\e090";}.glyphicon-arrow-left:before {content: "\e091";}.glyphicon-arrow-right:before {content: "\e092";}.glyphicon-arrow-up:before {content: "\e093";}.glyphicon-arrow-down:before {content: "\e094";}.glyphicon-share-alt:before {content: "\e095";}.glyphicon-resize-full:before {content: "\e096";}.glyphicon-resize-small:before {content: "\e097";}.glyphicon-exclamation-sign:before {content: "\e101";}.glyphicon-gift:before {content: "\e102";}.glyphicon-leaf:before {content: "\e103";}.glyphicon-fire:before {content: "\e104";}.glyphicon-eye-open:before {content: "\e105";}.glyphicon-eye-close:before {content: "\e106";}.glyphicon-warning-sign:before {content: "\e107";}.glyphicon-plane:before {content: "\e108";}.glyphicon-calendar:before {content: "\e109";}.glyphicon-random:before {content: "\e110";}.glyphicon-comment:before {content: "\e111";}.glyphicon-magnet:before {content: "\e112";}.glyphicon-chevron-up:before {content: "\e113";}.glyphicon-chevron-down:before {content: "\e114";}.glyphicon-retweet:before {content: "\e115";}.glyphicon-shopping-cart:before {content: "\e116";}.glyphicon-folder-close:before {content: "\e117";}.glyphicon-folder-open:before {content: "\e118";}.glyphicon-resize-vertical:before {content: "\e119";}.glyphicon-resize-horizontal:before {content: "\e120";}.glyphicon-hdd:before {content: "\e121";}.glyphicon-bullhorn:before {content: "\e122";}.glyphicon-bell:before {content: "\e123";}.glyphicon-certificate:before {content: "\e124";}.glyphicon-thumbs-up:before {content: "\e125";}.glyphicon-thumbs-down:before {content: "\e126";}.glyphicon-hand-right:before {content: "\e127";}.glyphicon-hand-left:before {content: "\e128";}.glyphicon-hand-up:before {content: "\e129";}.glyphicon-hand-down:before {content: "\e130";}.glyphicon-circle-arrow-right:before {content: "\e131";}.glyphicon-circle-arrow-left:before {content: "\e132";}.glyphicon-circle-arrow-up:before {content: "\e133";}.glyphicon-circle-arrow-down:before {content: "\e134";}.glyphicon-globe:before {content: "\e135";}.glyphicon-wrench:before {content: "\e136";}.glyphicon-tasks:before {content: "\e137";}.glyphicon-filter:before {content: "\e138";}.glyphicon-briefcase:before {content: "\e139";}.glyphicon-fullscreen:before {content: "\e140";}.glyphicon-dashboard:before {content: "\e141";}.glyphicon-paperclip:before {content: "\e142";}.glyphicon-heart-empty:before {content: "\e143";}.glyphicon-link:before {content: "\e144";}.glyphicon-phone:before {content: "\e145";}.glyphicon-pushpin:before {content: "\e146";}.glyphicon-usd:before {content: "\e148";}.glyphicon-gbp:before {content: "\e149";}.glyphicon-sort:before {content: "\e150";}.glyphicon-sort-by-alphabet:before {content: "\e151";}.glyphicon-sort-by-alphabet-alt:before {content: "\e152";}.glyphicon-sort-by-order:before {content: "\e153";}.glyphicon-sort-by-order-alt:before {content: "\e154";}.glyphicon-sort-by-attributes:before {content: "\e155";}.glyphicon-sort-by-attributes-alt:before {content: "\e156";}.glyphicon-unchecked:before {content: "\e157";}.glyphicon-expand:before {content: "\e158";}.glyphicon-collapse-down:before {content: "\e159";}.glyphicon-collapse-up:before {content: "\e160";}.glyphicon-log-in:before {content: "\e161";}.glyphicon-flash:before {content: "\e162";}.glyphicon-log-out:before {content: "\e163";}.glyphicon-new-window:before {content: "\e164";}.glyphicon-record:before {content: "\e165";}.glyphicon-save:before {content: "\e166";}.glyphicon-open:before {content: "\e167";}.glyphicon-saved:before {content: "\e168";}.glyphicon-import:before {content: "\e169";}.glyphicon-export:before {content: "\e170";}.glyphicon-send:before {content: "\e171";}.glyphicon-floppy-disk:before {content: "\e172";}.glyphicon-floppy-saved:before {content: "\e173";}.glyphicon-floppy-remove:before {content: "\e174";}.glyphicon-floppy-save:before {content: "\e175";}.glyphicon-floppy-open:before {content: "\e176";}.glyphicon-credit-card:before {content: "\e177";}.glyphicon-transfer:before {content: "\e178";}.glyphicon-cutlery:before {content: "\e179";}.glyphicon-header:before {content: "\e180";}.glyphicon-compressed:before {content: "\e181";}.glyphicon-earphone:before {content: "\e182";}.glyphicon-phone-alt:before {content: "\e183";}.glyphicon-tower:before {content: "\e184";}.glyphicon-stats:before {content: "\e185";}.glyphicon-sd-video:before {content: "\e186";}.glyphicon-hd-video:before {content: "\e187";}.glyphicon-subtitles:before {content: "\e188";}.glyphicon-sound-stereo:before {content: "\e189";}.glyphicon-sound-dolby:before {content: "\e190";}.glyphicon-sound-5-1:before {content: "\e191";}.glyphicon-sound-6-1:before {content: "\e192";}.glyphicon-sound-7-1:before {content: "\e193";}.glyphicon-copyright-mark:before {content: "\e194";}.glyphicon-registration-mark:before {content: "\e195";}.glyphicon-cloud-download:before {content: "\e197";}.glyphicon-cloud-upload:before {content: "\e198";}.glyphicon-tree-conifer:before {content: "\e199";}.glyphicon-tree-deciduous:before {content: "\e200";}.tree-ul-first {background-color: #262222;margin-top: 0;}.tree-span-left {padding-left: 10px;padding-right: 10px;}.tree-span-right {right: 15px;position: absolute;top: auto;}.tree-ul-childs {background-color: #262222;display: none;height: auto;}.tree-ul-childs li,.tree-ul-first li {width: 100%;background-color: #262222;}.tree-ul-childs li a,.tree-ul-first li a {width: auto;position: relative;color: #E9E8E8;text-decoration: none;}.defuat-left {padding-left: 8%;}.tree-ul-first > li > a:hover,.tree-ul-childs > li > a:hover,.tree-ul-first > li > a:focus,.tree-ul-childs > li > a:focus {  text-decoration: none;  background-color: #777;}

四、jquery代码 tree.js

var treeData = {};function getTree(obj, tree) {treeData = tree;var data = tree.data;var treeContentStart = "";var treeContentEnd = "";if(data.length > 0) {treeContentStart += '<ul class="nav nav-pills tree-ul-first" role="tablist">';$.each(data, function(i, n) {var menuLeftIcon = n.menuLeftIcon ? n.menuLeftIcon : 'glyphicon glyphicon-paperclip';if(n.menuChildData && n.menuChildData.length > 0) {treeContentStart += '<li role="presentation">' +'<a href="javascript:void(0)" data-url="' + n.menuUrl + '" onclick="openChildNotes(this)">' +'<span class="tree-span-left ' + menuLeftIcon + '"></span>' + n.menuName + '<span class="' + tree.clickIconBefore + ' tree-span-right"></span></a>';treeContentStart += fillTreeData(n.menuChildData);} else {treeContentStart += '<li role="presentation">' +'<a href="javascript:void(0)" data-url="' + n.menuUrl + '">' +'<span class="tree-span-left ' + menuLeftIcon + '"></span>' + n.menuName + '</a>';}treeContentStart += '<li>';});treeContentEnd += "</ul>";}obj.html(treeContentStart + treeContentEnd);}function fillTreeData(data) {var treeContentStart = "";var treeContentEnd = "";if(data.length > 0) {treeContentStart += '<ul class="nav nav-pills tree-ul-childs">';$.each(data, function(i, n) {var menuLeftIcon = n.menuLeftIcon ? n.menuLeftIcon : 'glyphicon glyphicon-paperclip';if(n.menuChildData && n.menuChildData.length > 0) {treeContentStart += '<li>' +'<a href="javascript:void(0)" data-url="' + n.menuUrl + '" onclick="openChildNotes(this)"><span class="tree-span-left ' + menuLeftIcon + '"></span>' + n.menuName + '<span class="' + treeData.clickIconBefore + ' tree-span-right"></span></a>';treeContentStart += fillTreeData(n.menuChildData);} else {treeContentStart += '<li>' +'<a href="javascript:void(0)" data-url="' + n.menuUrl + '"><span class="tree-span-left ' + menuLeftIcon + '"></span>' + n.menuName + '</a>';}treeContentStart += '<li>';});treeContentEnd += "</ul>";}return treeContentStart + treeContentEnd;}function openChildNotes(obj) {var o = $(obj);var showState = o.next().css("display");var leftOff = o.css("padding-left");var paddingLeft = leftOff.substring(0, leftOff.length - 2);if(showState == "block") {showState = "none";o.find("span").last().removeClass(treeData.clickIconAfter).addClass(treeData.clickIconBefore);o.next().find("li").find("a").css("padding-left", (parseInt(paddingLeft) - 20) + 'px');$("ul", o.next("ul")).css("display", showState);$("li a span.tree-span-right", o.next("ul")).removeClass(treeData.clickIconAfter).addClass(treeData.clickIconBefore);} else {showState = "block";o.find("span").last().removeClass(treeData.clickIconBefore).addClass(treeData.clickIconAfter);o.next().find("li").find("a").css("padding-left", (parseInt(paddingLeft) + 20) + 'px');}o.next("ul").css("display", showState);}

到此一个简单的树形菜单就此完成。如有写的不好之处，希望大家提提意见。谢谢！

0 0