今天自己寫一個樹狀行的折疊圖，開始在網上找了插件，但是沒有說明文檔，調了半天也沒有調好，於是決定自己寫一個關於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 () {
});
下面是效果對比圖，樹的分支我沒仔細區分寫的字一樣，大家可以仔細看一下后面的數字編號及變化：
