利用 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>代码使用了递归，方法还是借鉴他人，然后加以修改完善，最终得到一个自己使用的灵活例子。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
