jquery树形菜单效果的简单实例

内容摘要
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/
文章正文
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery树形导航菜单插件制作滑动多级二级下拉菜单展示 www.phpstudy.net</title>
<meta name="description" content="jquery树形导航菜单插件制作一个类似树形展示的slider滑动多级二级下拉菜单目录，支持无限嵌套。jquery插件,jquery下载。" />
<script type="text/javascript" src="http://phpstudy.net/keleyi/pmedia/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://phpstudy.net/keleyi/phtml/jtree/jquery.tree.js"></script>
<script type="text/javascript">
$(function () {
$('#files').tree({
expanded: 'li:first'
});
});
</script><style type="text/css">
*{margin:0;padding:0;list-style-type:none;font-size:12px;}
a,img{border:0;}
#files{margin:100px auto;width:400px;}
.tree,.tree ul,.tree li{list-style:none;margin:0;padding:0;zoom: 1;}
.tree ul{margin-left:8px;}
.tree li a{color:#555;padding:.1em 7px .1em 27px;display:block;text-decoration:none;border:1px dashed #fff;background:url(file.gif) 5px 50% no-repeat;}
.tree li a.tree-parent{background:url(http://phpstudy.net/keleyi/phtml/jtree/icon-folder-open.gif) 5px 50% no-repeat;}
.tree li a.tree-parent-collapsed{background:url(http://phpstudy.net/keleyi/phtml/jtree/icon-folder.gif) 5px 50% no-repeat;}
.tree li a:hover,.tree li a.tree-parent:hover,.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{color:#000;border:1px solid#eee;background-color:#fafafa;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.tree li a:focus,.tree li a.tree-parent:focus,.tree li a.tree-item-active{border:1px solid #e2f3fb;background-color:#f2fafd;}
.tree ul.tree-group-collapsed{display:none;}
</style>
</head>
<body>
<div >
<ul id="files" class="tree">
<li><a href="javascript:void(0);">jquery 特效</a>
<ul class="tree">
<li><a href="javascript:void(0);">jquery图片特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery图片切换">jquery图片切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery幻灯片">jquery幻灯片</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery图片滚动">jquery图片滚动</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery广告">jquery广告</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery导航菜单</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery动画菜单">jquery动画菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery树形菜单">jquery树形菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery右键菜单">jquery右键菜单</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery选项卡特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery文字特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery文字滚动">jquery文字滚动</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery文字闪烁">jquery文字闪烁</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery文字切换">jquery文字切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery文字数量">jquery文字数量</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery文字改变">jquery文字改变</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery表单特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery表单验证">jquery表单验证</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery表单美化">jquery表单美化</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery搜索提示">jquery搜索提示</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery全选反选">jquery全选反选</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">jquery表格特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="jquery图表插件">jquery图表插件</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery表格排序">jquery表格排序</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="jquery表格变色">jquery表格变色</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0);">js特效</a>
<ul class="tree">
<li><a href="javascript:void(0);">js图片特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js图片切换">js图片切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js幻灯片">js幻灯片</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js图片滚动">js图片滚动</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js图片放大镜">js图片放大镜</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js广告">js广告</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js导航菜单</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js动画菜单">js动画菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js树形菜单">js树形菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js下拉菜单">js下拉菜单</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js右键菜单">js右键菜单</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js选项卡特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js选项卡切换">js选项卡切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js滑动选项卡">js滑动选项卡</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js文字特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js文字滚动">js文字滚动</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js文字闪烁">js文字闪烁</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js文字切换">js文字切换</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js文字数量">js文字数量</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js文字改变">js文字改变</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js表单特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js表单验证">js表单验证</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js表单美化">js表单美化</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js搜索提示">js搜索提示</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js全选反选">js全选反选</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">js表格特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="js图表插件">js图表插件</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="js表格排序">js表格排序</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="phpstudy.net">柯乐义</a></li>
</ul>
</li>
</ul>
</li>
 
<li><a href="javascript:void(0);">flash特效</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="flash图片特效">flash图片特效</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="flash导航菜单">flash导航菜单</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">div+css教程</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="div+css布局">div+css布局</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="www.phpstudy.net">柯乐义</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="css3教程">css3教程</a></li>
</ul>
</li>
<li><a href="javascript:void(0);">html5教程</a>
<ul class="tree">
<li><a href="http://phpstudy.net/" target="_blank" title="柯乐义">www.phpstudy.net</a></li>
<li><a href="http://phpstudy.net/" target="_blank" title="html5图表">html5图表</a></li>
</ul>
</li>
</ul></div>
 
</body>
</html>

以上这篇jquery树形菜单效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。
代码注释
上一篇setTimeout()递归调用不加引号出错的解决方法下一篇简单学习C#中的泛型方法使用

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！