跟小伙伴打赌十分钟用jQuery编写树形目录折叠功能的插件，插件名：treelist。
插件文件（treelist-1.0.js）：
/**
* Created by ZhiGuo Wang on 2016/3/22.
* jQuery treelist plugin
*/
(function($){
$.fn.extend({
treelist:function(data){
return this.each(function(){
var s="";
var $this=this;
$($this).html("");
$.each(data,function(a,b){
s="<h4 class='h_"+a+"'>"+ b.name+"</h4>";
s+="<ul class='u_"+a+"'>";
$.each(b.sub,function(c,d){
s+="<li>"+ d.name+"</li>";
});
s+="</ul>";
$($this).append(s);
$(".h_"+a).click(function(){
$(".u_"+a).toggle();
});
});
});
}
});
})(jQuery);
HTML示例：
<!DOCTYPE html>
<head>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/treelist-1.0.min.js"></script>
<script>
$(document).ready(function(){
/*
* 数据结构
* */
var data=[
{
name:"考勤管理",
src:"",
sub:[
{
name:"打卡",
src:""
},
{
name:"请假/出差",
src:""
},
{
name:"外勤/离岗",
src:""
}
]
},
{
name:"日志工作",
src:"",
sub:[
{
name:"填写工作日志",
src:""
},
{
name:"查看工作日志",
src:""
}
]
}
];
/*
* 调用例子
* */
$(".list").treelist(data);
});
</script>
</head>
<body>
<div class="list"></div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
