今天自己写一个树状行的折叠图，开始在网上找了插件，但是没有说明文档，调了半天也没有调好，于是决定自己写一个关于jQuery的树型图的 增删改查 上移 下移：
下面的是css代码，可以复制下来直接引用到HTML文档上，也可以根据自己的需求进行更改：
i{font-style: normal;
color:#b9a2ab;}
#change.tree{
text-align: left;
padding: 0;
}
.tree p{
display: inline-block;
font-size: 14px;
line-height: 20px;
margin:0;
}
.tree .info{
display: inline-block;
background: #e8e8e1;
font-size: 14px;
line-height: 20px;
margin:6px 0 ;
padding: 0 8px;
border: 1px solid #c6c6c6;
border-radius: 8px;
}
#icon1{
display:inline-block;
line-height: 18px;
background: #5a6571;
border:1px solid #5a6571;
color:#fff;
border-radius: 5px;
padding:0 4px;
margin: -5px 5px 0 5px;
cursor:pointer;
vertical-align: middle!important;
}
#change.tree.zishu{
padding-left: 20px;
}
.portlet-body ul{
padding-left: 10px;
}
.portlet-body ul li div{
display: inline-block;
}
接着下来就是HTML代码，有点多，目的是为了更好的展示效果，大家看的话可以就看第一个ul内的内容，运用时会通过AJAX获取数据，到时候动态创建一个ul的内容就行；
<div style="width: 100%">
<ul>
<li class="parentList">
<div id="change" class="tree" style="width:50%;">
<span id="icon1" class="clickSPan">-</span>
<span class="info">
<P>我们准备找人装修1</P>
<br>
<i>装修公司</i>
<i>施工队</i>
<i>考虑装修费用</i>
<i>风水</i>
</span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="edit" href="javascript:void(0);" class="addSubclass">添加子类</a>
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司1</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司2</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司3</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司4</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
</ul>
<ul>
<li class="parentList">
<div id="change" class="tree" style="width:50%;">
<span id="icon1" class="clickSPan">-</span>
<span class="info">
<P>我们准备找人装修2</P>
<br>
<i>装修公司</i>
<i>施工队</i>
<i>考虑装修费用</i>
<i>风水</i>
</span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="edit" href="javascript:void(0);" class="addSubclass">添加子类</a>
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司1</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司2</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司3</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司4</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
</ul>
<ul>
<li class="parentList">
<div id="change" class="tree" style="width:50%;">
<span id="icon1" class="clickSPan">-</span>
<span class="info">
<P>我们准备找人装修3</P>
<br>
<i>装修公司</i>
<i>施工队</i>
<i>考虑装修费用</i>
<i>风水</i>
</span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="edit" href="javascript:void(0);" class="addSubclass">添加子类</a>
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司1</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司2</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司3</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
<li class="list">
<div class="xianshi" style="width: 100%">
<div id="change" class="tree zishu" style="width:50%;">
<span id="icon1" class="close1">-</span>
<span class="info"><i>装修公司4</i></span>
</div>
<div style="width:15%;">12</div>
<div style="width:30%;">
<a data-func="del" href="javascript:void(0);" class="massage_revise">修改</a>
<a data-func="edit" href="javascript:void(0);" class="move_up">上移</a>
<a data-func="edit" href="javascript:void(0);" class="move_down">下移</a>
<a data-func="del" href="javascript:void(0);" class="massage_delete">删除</a>
</div>
</div>
</li>
</ul>
</div>
接下来就是JavaScript部分，同样可以直接复制下来进行引用，我就不仔细讲了，大家可以看代码注释
/**
* Created by web红枫 on 2017/4/10.
*/
var count = 1;
$(".clickSPan").click(function () {
count++;
if(count%2==0){
$(this).html("+");
$(this).parent().parent().siblings().css("display","none")
}else{
$(this).html("-");
$(this).parent().parent().siblings().css("display","block")
}
});
/******树形图的删除*******/
$(".massage_delete").click(function () {
$(this).parent().parent().parent().remove();
});
/******树形图的节点内容的修改*******/
$(".massage_revise").click(function () {
});
/******树形图的上移(二级目录)*******/
$(".move_up").click(function () {
var _old = $(this).closest("li.list");//当前元素的祖辈 li
var _new = $(this).closest("li.list").prev("li.list");//当前元素的祖辈 li的上一个li
if (_new.length > 0) {
$(_new).before(_old);
}
});
/******树形图的上移(一级目录)*******/
$(".move_up").click(function () {
var _old = $(this).closest("li.parentList").parent();
var _new = $(this).closest("li.parentList").parent().prev("ul");
if (_new.length > 0) {
$(_new).before(_old);
}
});
/******树形图的下移(二级目录)*******/
$(".move_down").click(function () {
var _old = $(this).closest("li.list");//当前元素的祖辈 li
var _new = $(this).closest("li.list").next("li.list");//当前元素的祖辈 li的上一个li
$(_new).after(_old);
});
/******树形图的上移(一级目录)*******/
$(".move_down").click(function () {
var _old = $(this).closest("li.parentList").parent();
var _new = $(this).closest("li.parentList").parent().next("ul");
$(_new).after(_old);
});
/******树形图的添加子节点*******/
$(".addSubclass").click(function () {
});
下面是效果对比图，树的分支我没仔细区分写的字一样，大家可以仔细看一下后面的数字编号及变化：
