Html
    Css
    Js

    
                        
@import url("https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css");
.tree {
	min-height:20px;
	padding:19px;
	margin-bottom:20px;
	background-color:#fbfbfb;
	border:1px solid #999;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);
	-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)
}
.tree li {
	list-style-type:none;
	margin:0;
	padding:10px 5px 0 5px;
	position:relative
}
.tree li::before,.tree li::after {
	content:'';
	left:-20px;
	position:absolute;
	right:auto
}
.tree li::before {
	border-left:1px solid #999;
	bottom:50px;
	height:100%;
	top:0;
	width:1px
}
.tree li::after {
	border-top:1px solid #999;
	height:20px;
	top:25px;
	width:25px
}
.tree li div {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:1px solid #999;
	border-radius:5px;
	display:inline-block;
	padding:3px 8px;
	text-decoration:none;
	max-width:200px;
	cursor:pointer
}
.tree>ul>li::before,.tree>ul>li::after {
	border:0
}
.tree li:last-child::before {
	height:30px
}
.tree li.parent_li>div:hover,.tree li.parent_li>div:hover+ul li div {
	background:#eee;
	border:1px solid #94a0b4;
	color:#000
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.7.2
 立即下载

多级树形控件可折叠可动态添加请求数据

需要引用bootstrap.min.css,展开收缩的图标可以换成自己的

0