在一些项目中，都会有许多的导航栏，或者菜单栏，有的是二级菜单，有的是三级菜单，更有的是四级菜单，那么这时就会非常头痛，我也是在闲事为大家写了这么一个小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>
这上面应该有你需要的，三级四级都可以使用，有错误之处还请大神多多帮助，嘿嘿！
时间： 2024-08-01 00:03:38