多级菜单导航栏

在一些项目中，都会有许多的导航栏，或者菜单栏，有的是二级菜单，有的是三级菜单，更有的是四级菜单，那么这时就会非常头痛，我也是在闲事为大家写了这么一个小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>三级菜单a</li>
25                             <li>三级菜单b</li>
26                             <li>三级菜单c</li>
27                             <li>三级菜单d</li>
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>dd</p></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>

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