利用 Jquery + css 自制无限极下拉分类

网上相关例子基本都是 ztree,然后个人去看了看官网,看了半天没找到合适又简单的,ztree,由于界面不适合项目里面的,要是修改他的样式我还可能出现更多的错误,于是打算自己手写一个,一个是锻炼自己的能力,第二是通用,易于修改,下一次要用到的时候自己拿来主义即可。

下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style>
#div_menu li{ list-style:none; padding-top:5px; padding-bottom:5px;}
#div_menu li span{ display:inline-block; float:right; position:relative; left:-15px; cursor:pointer;}
#div_menu{ width:220px; background-color:#DDD;}
span{ display:inline;}
.a{ display:block;}
.menubtn{}
</style>
</head>
<div id="div_menu"></div>
<body>
<script>
	var menulist = {
            "menulist": [
                { "MID": "M001", "MName": "首页", "Url": "#", "menulist": "" },
                { "MID": "M002", "MName": "车辆买卖", "Url": "#", "menulist":
                    [
                         { "MID": "M003", "MName": "新车", "Url": "#", "menulist":
                            [
                                { "MID": "M006", "MName": "奥迪", "Url": "#", "menulist": "" },
                                { "MID": "M007", "MName": "别克", "Url": "#", "menulist": "" }
                            ]
                         },
                         { "MID": "M004", "MName": "二手车", "Url": "#", "menulist": 
						 	[
                                { "MID": "M008", "MName": "宝马", "Url": "#", "menulist": "" },
                                { "MID": "M009", "MName": "悍马", "Url": "#", "menulist": "" }
                            ]
						  },
                         { "MID": "M005", "MName": "改装车", "Url": "#", "menulist": "" }
                    ]
                },
                { "MID": "M006", "MName": "宠物", "Url": "#", "menulist": "" }
          ]
        };
		
		$(function () {
			//生成树菜单
             var showlist = $("<ul class='menu'></ul>");
             showall(menulist.menulist, showlist);
             $("#div_menu").append(showlist);
			 //隐藏显示树菜单
			 $("#div_menu li").children("ul").hide();
			
			 $(".menubtn span").click(function(){ 
				 if( $(this).text()=="+" ){
					 $(this).parent("li").children("ul").slideDown(); //mouseover  
					 $(this).text("-");
				 }else if( $(this).text()=="-" ){
					 $(this).text("+");
				 	 $(this).parent("li").children("ul").slideUp();
				 }
			 });
        });

        //menu_list为json数据
        //parent为要组合成html的容器
        function showall(menu_list, parent) {
            for (var menu in menu_list) {
                //如果有子节点,则遍历该子节点
                if (menu_list[menu].menulist.length > 0) {
                    //创建一个子节点li
                    var li = $("<li class='a menubtn' ><span>+</span></li>");
                    //将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
                    $(li).append(menu_list[menu].MName).append("<ul></ul>").appendTo(parent);
                    //将空白的ul作为下一个递归遍历的父亲节点传入
                    showall(menu_list[menu].menulist, $(li).children().eq(1));
                }
                //如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
                else {
                   $("<li></li>").append(menu_list[menu].MName).appendTo(parent);
                }
            }
        }
</script>
</body>
</html>

代码使用了递归,方法还是借鉴他人,然后加以修改完善,最终得到一个自己使用的灵活例子。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java成神之路

Java企业微信开发_02_通讯录同步

       登录企业微信—>管理工具—>通讯录同步助手—>开启“API接口同步”  ; 开启后,即可看到通讯录密钥,也可设置通讯录API的权限:读取或者编辑通...

3102

.NET中的密钥加密

本教程将演示如何通过System.Security.Cryptography在.NET Framework 1.1中实现对称加密/密钥加密。

5278
来自专栏跟着阿笨一起玩NET

C#操作XML方法汇总

631
来自专栏lgp20151222

SSH上一个随笔的基础上添加上hibernate支持

熟悉的pom.xml其中lo4g和slf4j这两个包第一眼看上去有点莫名奇妙,我也是这么觉得的,实际作用是在后台输出sql语句,不导入hibernate就会报错...

661
来自专栏用户画像

jQuery validate

551
来自专栏码匠的流水账

聊聊rocketmq的PushConsumerImpl

io/openmessaging/rocketmq/consumer/PushConsumerImpl.java

1272
来自专栏码匠的流水账

聊聊jesque的WorkerImpl与WorkerPool

Resque是一个使用redis来创建后台任务的ruby组件。而jesque是其java版本。通常用来做延时队列。

631
来自专栏猿人谷

du熊学斐波那契I

du熊学斐波那契I Time Limit : 2000/1000ms (C/Other)   Memory Limit : 65535/32768K (C/Ot...

18610
来自专栏木宛城主

PowerShell 获取Site Collection下被签出的文件

由于权限的设置,当文件被签出时导致别人不可见了,这对校验文件个数的人来说着实是件烦恼的事。幸好利用PowerShell,可以获取Site Collection下...

1907
来自专栏函数式编程语言及工具

Akka(8): 分布式运算:Remoting-远程查找式

  Akka是一种消息驱动运算模式,它实现跨JVM程序运算的方式是通过能跨JVM的消息系统来调动分布在不同JVM上ActorSystem中的Actor进行运算,...

3649

扫码关注云+社区