多级菜单导航栏
Posted Mr.Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了多级菜单导航栏相关的知识，希望对你有一定的参考价值。
在一些项目中，都会有许多的导航栏，或者菜单栏，有的是二级菜单，有的是三级菜单，更有的是四级菜单，那么这时就会非常头痛，我也是在闲事为大家写了这么一个小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>
这上面应该有你需要的，三级四级都可以使用，有错误之处还请大神多多帮助，嘿嘿！
以上是关于多级菜单导航栏的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单