效果图:
HTML代码如下:
复制代码
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<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>层级菜单</title> <style type="text/css"> body{ font-family:'Microsoft Yahei'; } body,ul{ margin:0px; padding:0px; } ul{list-style:none;} .menu{ width:200px; margin:20px auto 0; } .menu .level1,.menu li ul a{ display:block; width:200px; height:30px; line-height:30px; text-decoration:none; background-color:#3366cc; color:#fff; font-size:16px; text-indent:10px; } .menu .level1{ border-bottom:1px solid #afc6f6; } .menu li ul a{ font-size:14px; text-indent:20px; background-color:#7aa1ef; } .menu li ul li{ border-bottom:1px solid #afc6f6; } .menu li ul{ display:none; } .menu li ul.current{ display:block; } .menu li ul li a:hover{ background-color:#f6b544; } </style> <script src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ // 点击一级菜单,显示二级菜单 // $('.level1').click() var $level1 = $('.level1') $level1.click(function(){ $(this).next().slideDown() // 隐藏:这个人的父级的兄弟的儿子ul $(this).parent().siblings().children('ul').slideUp() }) }) </script> </head> <body> <ul class="menu"> <li> <a href="#" class="level1">手机</a> <ul class="current"> <li><a href="#">iPhone X 256G</a></li> <li><a href="#">红米4A 全网通</a></li> <li><a href="#">HUAWEI Mate10</a></li> <li><a href="#">vivo X20A 4GB</a></li> </ul> </li> <li> <a href="#" class="level1">笔记本</a> <ul> <li><a href="#">MacBook Pro</a></li> <li><a href="#">ThinkPad</a></li> <li><a href="#">外星人(Alienware)</a></li> <li><a href="#">惠普(HP)薄锐ENVY</a></li> </ul> </li> <li> <a href="#" class="level1">电视</a> <ul> <li><a href="#">海信(hisense)</a></li> <li><a href="#">长虹(CHANGHONG)</a></li> <li><a href="#">TCL彩电L65E5800A</a></li> </ul> </li> <li> <a href="#" class="level1">鞋子</a> <ul> <li><a href="#">新百伦</a></li> <li><a href="#">adidas</a></li> <li><a href="#">特步</a></li> <li><a href="#">安踏</a></li> </ul> </li> <li> <a href="#" class="level1">玩具</a> <ul> <li><a href="#">乐高</a></li> <li><a href="#">费雪</a></li> <li><a href="#">铭塔</a></li> <li><a href="#">贝恩斯</a></li> </ul> </li> </ul> </body> </html>
------- 知识无价,汗水有情,如需搬运请注明出处,谢谢!
最后
以上就是微笑棒球最近收集整理的关于JQuery实现层级菜单 ------- 知识无价,汗水有情,如需搬运请注明出处,谢谢!的全部内容,更多相关JQuery实现层级菜单 ------- 知识无价内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复