多级菜单导航栏

在一些项目中,都会有许多的导航栏,或者菜单栏,有的是二级菜单,有的是三级菜单,更有的是四级菜单,那么这时就会非常头痛,我也是在闲事为大家写了这么一个小demo,希望大家可以参考一下。

 1 DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8" />
 6         <title>title>
 7     head>
 8     <style type="text/css">
 9         
10         ul li.yiji {
11             list-style-image: url(img/-.gif);
12         }
13         ul li{
14             cursor: pointer;
15         }
16     style>
17 
18     <body>
19         <ul>
20             <li class="yiji">主题市场
21                 <ul>
22                     <li>运动派
23                         <ul>
24                             <li>三级菜单ali>
25                             <li>三级菜单bli>
26                             <li>三级菜单cli>
27                             <li>三级菜单dli>
28                         ul>
29                     li>
30                     <li>有车族
31                         <ul>
32                             <li>三级
33                                 <ul>
34                                     <li>四级li>
35                                     <li>四级li>
36                                     <li>四级li>
37                                 ul>
38                             li>
39                             <li>三级li>
40                             <li>三级li>
41                             <li>三级li>
42                         ul>
43                     li>
44                     <li>生活家li>
45                 ul>
46             li>
47             <li class="yiji">特色购物
48                 <ul>
49                     <li>淘宝二手li>
50                     <li>拍卖会li>
51                     <li>爱逛街li>
52                     <li>全球购li>
53                     <li>淘女郎li>
54                 ul>
55             li>
56             <li class="yiji">优惠促销
57                 <ul>
58                     <li>天天特价li>
59                     <li>免费试用li>
60                     <li>清仓li>
61                     <li>1元起拍li>
62                 ul>
63             li>
64             <li>工具li>
65         ul>
66         <div name="dd"><p>ddp>div>
67         <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js">script>  
68         <script type="text/javascript">
69             //has()匹配含有选择器所匹配的元素的元素
70             //is()根据选择器、元素或 jQuery 对象来检测匹配元素集合
71             $(function(){
72                 $("li:has(ul)").click(function(e){
73                     if(this == e.target){
74                         if($(this).children().is(":hidden")){
75                             $(this).css("list-style-image","url(img/-.gif)");
76                         }else{
77                             $(this).css("list-style-image","url(img/1.gif)");
78                         }
79                         $(this).children().toggle("slow");
80                     }
81                     
82                 })
83                 $("li:not(:has(ul))").css("list-style","none");
84             })
85             
86         script>
87 
88     body>
89 
90 html>

这上面应该有你需要的,三级四级都可以使用,有错误之处还请大神多多帮助,嘿嘿!

转载于:https://www.cnblogs.com/zywaf/p/7278975.html

你可能感兴趣的:(多级菜单导航栏)