基于bootstrap样式的tree，
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>bootstrap 树</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
.hj-tree{
border:1px solid #ddd;
}
.list-group {
padding-left: 0;
margin-bottom: 1px;
}
.list-group-item {
position: relative;
display: block;
padding: 0px;
padding-top:5px;
padding-bottom:5px;
padding-left:20px;
margin-bottom: -1px;
background-color: #fff;
border: 0px solid #ddd;
}
.child-list-group{
display:none;
}
.hj-tree-node{
cursor: pointer;
border:0px solid red;
}
.hj-node-gly{
padding-right:10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="hj-tree">
<ul class="list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>一级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>一级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>一级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-folder-open hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>二级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>四级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="list-group-item">
<p class="media hj-tree-node"><span class="glyphicon glyphicon-plus hj-node-gly"></span>三级菜单</p>
<ul class="list-group child-list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
<li class="list-group-item">
<span class="glyphicon glyphicon-plus hj-node-gly"></span>
<a href="">五级菜单</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- jQuery文件-->
<script src="admin/js/jquery-1.8.0.min.js"></script>
<script>
$(".hj-tree-node").toggle(
function () {
$(this).children().removeClass("glyphicon-plus");
$(this).children().addClass("glyphicon-minus");
$(this).next(".child-list-group").slideDown();
},
function () {
$(this).children().addClass("glyphicon-plus");
$(this).children().removeClass("glyphicon-minus");
$(this).next(".child-list-group").slideUp();
}
);
</script>
</body>
</html>
运行效果：
基于bootstrap样式的tree，的更多相关文章
- 表格布局----基于bootstrap样式 布局
在实际开发中,我们通过菜鸟教程复制的表格往往不能满足我们的开发需求,样式很难看,而且不能自适应,尤其是需要到处Excel的样式,感觉非常糟糕,这次我就写了一个表单,不足之处,希望大神们多多指教: 代码 ...
- 基于Bootstrap样式的 jQuery UI 控件 (v0.5).
网址:http://www.shouce.ren/example/show/s/6444#download-bootstrap
- 循序渐进BootstrapVue，开发公司门户网站（1）---基于Bootstrap网站模板构建组件界面
在前面随笔<使用BootstrapVue相关组件,构建Vue项目界面>概括性的介绍了BootstrapVue的使用过程,其实选用这个主要就是希望能够用来构建一些公司门户网站的内容,毕竟基于 ...
- 基于bootstrap框架在ie8以下,兼容媒体查询[css样式]
<style type="text/css"> /*基于bootstrap框架在ie8以下,兼容媒体查询*/ .row [class^="col-" ...
- JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有）
前言:最近园子里多了许多谈语言.谈环境.谈逼格(格局)的文章,看看笑笑过后,殊不知其实都是然并卵.提升自己的技术才是王道.之前博主分享过多篇bootstrap组件的文章,引起了很多园友的关注和支持,看 ...
- 基于Bootstrap仿淘宝分页控件实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- 基于Bootstrap的DropDownList的JQuery组件的完善版
在前文 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件 中,实现了DropDownList的JQuery组件,但是留有遗憾.就是当下拉菜单出现滚动条的时候,滚动条会覆 ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- 基于Bootstrap的超酷jQuery开关按钮插件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJgAAAA2CAIAAAC0tsfoAAAB/0lEQVR4nO3bQWrCQBTGcc/mbVz0DD
随机推荐
- 关于 ASP.NET MVC 中的视图生成
在 ASP.NET MVC 中,我们将前端的呈现划分为三个独立的部分来实现,Controller 用来控制用户的操作,View 用来控制呈现的内容,Model 用来表示处理的数据. 从控制器到视图 通 ...
- img标签使用绝对路径无法显示图片
说明: 图片的磁盘路径斜杠使用:右斜杠"\",而图片的网络路径使用左斜杠"/",注意加以区分. 如果这张图片属于服务器图片或者网络图片,我们必须在Img标签里 ...
- FFmpeg滤镜实现区域视频增强 及 D3D实现视频播放区的拉大缩小
1.区域视频增强 FFmpeg滤镜功能十分强大,用滤镜可以实现视频的区域增强功能. 用eq滤镜就可以实现亮度.对比度.饱和度等的常用视频增强功能. 推荐两篇写得不错的博文: (1)ffmpeg综合应用 ...
- 5分钟创建一个SpringBoot + Themeleaf的HelloWord应用
第一步:用IDE创建一个普通maven工程,我用的eclipse. 第二步:修改pom.xml,加入支持SpringBoot和Themeleaf的依赖,文件内容如下: <?xml version ...
- Java - 网络编程
Java的网络编程学习,关于计算机基础的学习参考:计算机网络基础学习 - sqh. 参考:
- gearman 安装
yum install gperfyum install libevent-develyum install libuuid-develwget https://launchpad.net/gearm ...
- 使用insertBefore实现insertAdjacentHTML()
Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有 ...
- java函数的笔记
java中,函数即方法.也就是实现某个功能的办法. 函数的格式 修饰符 返回值类型 函数名(参数类型 参数) { 逻辑处理; return 处理结果; // return关键字是用于结束该函数的,并将 ...
- UIScrollView的封装
UIScrollView的封装 效果 特点 1.用法简单,尺寸大小,随意设置位置 2.可以有多个数据源的数据,可以定制不通的界面(如同上图,一个有文字,一个没有文字) 3.能够实现点击事件 用法 1. ...
- SVN为什么比Git更好
首先我表明一个根本的立场,我个人更喜欢用Git,但是,这仅仅是一个个人偏好.当我们需要将一种技术方案带给整个团队的时候,并不是由我们的个人偏好作为主要决定因素,而应该充分去权衡利弊,选择对团队,对公司 ...