利用 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 条评论
登录 后参与评论

相关文章

来自专栏知识分享

android的PowerManager和PowerManager.WakeLock

  学习android一段时间了,为了进一步了解android的应用是如何设计开发的,决定详细研究几个开源的android应用。从一些开源应用中吸收点东西,一边...

852
来自专栏杨龙飞前端

datatables,表格

1824
来自专栏一个会写诗的程序员的博客

BootstrapTable (前后端分页,表格 ajax 返回数据回调处理) 配置参数全说明

7644
来自专栏猿湿Xoong

Android 8.0 SystemUI(三):一说顶部 StatusBar

大家好,我是 ptt 。咱们继续 Android 8.0 SystemUI 的分析。

1882
来自专栏QQ音乐技术团队的专栏

Android系统线控和歌曲信息屏显的那点事

目前Android系统中主流的音乐播放器都支持线控的功能,线控设备包括有线耳机和蓝牙耳机或蓝牙车机,当不方便操作手机的时候可以通过线控来控制音乐的播...

3638
来自专栏点滴积累

geotrellis使用(三十五)Cesium加载geotrellis TMS瓦片

前言 做任何事情都不是想象中的那么简单。好久没有更新技术博客了,跟最近瞎忙有很大关系,虽说是瞎忙也抽空研究了些技术。 主要是前端渲染,像原生的WebGL和Ces...

32510
来自专栏一个会写诗的程序员的博客

6.3 Spring Boot集成mongodb开发小结

本章我们通过SpringBoot集成mongodb,Java,Kotlin开发一个极简社区文章博客系统。

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

C#实现树型结构TreeView节点拖拽的简单功能(转)

本文摘抄博客园里面的牛人吉日嘎啦。http://www.cnblogs.com/jirigala

701
来自专栏游戏杂谈

HTML5的Web Workers

该特性仅支持:FF3.5+、Opera 10.6+、Chrome 3+、Safari 4。

641
来自专栏移动开发之家

IJKPlayer问题集锦之不定时更新

1、IJKPlayer 不像系统播放器会给你旋转视频角度,所以你需要通过onInfo的what == IMediaPlayer.MEDIA_INFO_VIDEO...

2064

扫码关注云+社区