基于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
随机推荐
- Socket初识
基础概念 Socket,套接字,本质是网络编程接口.提供网络通信的能力,实现不同虚拟机或不同计算机之间的通信.面向客户/服务(C/S)模型,socket是应用层和传输层之间的中间软件抽象层: 顶上三层 ...
- thinkphp怎么修改配置进入默认首页
thinkphp文件夹下config 里面有个convention.php文件 里面有三个配置 'DEFAULT_MODULE' => 'Home', // 默认模块 'DEFAULT_CONT ...
- 微信小程序demo理解
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Verdana } p.p2 { margin: 0.0px 0.0px 0.0px 0.0p ...
- Java内部类学习笔记
20160923 定义:将一个类的定义放在另一个类的内部: 从外部类的非静态方法之外,创建某个内部类的对象:OutClassName.InnerClassName: 内部类拥有所有其外部类的成员的访问 ...
- CentOS6.7搭建LNMP环境
1:查看环境: [root@localhost ~]# cat /etc/redhat-release 2:关掉防火墙 #重启后生效开启 [root@localhost ~]# chkconfig i ...
- Access提示“操作必须使用一个可更新的查询”的解决办法
问题:软件工程师开发了一个asp.net+access网站,本地调试增.删.改和查都没有异常.部署到服务器windows2008 R2的IIS上运行后,查询没有异常.可是在修改操作提交时,产生异常:提 ...
- jQuery flickity 滑动触屏
flickity是一款自适应手机触屏滑动插件,它的API参数很丰富,包括对齐方式.循环滚动.自动播放.是否支持拖动.是否开启分页.是否自适应窗口等. 在线实例 实例演示 使用方法 <div cl ...
- 如何利用BI实现人力资源可视化管理
随着通信行业改革的不断深化,行业的发展形势和生存环境正发生巨大变化,通信和信息的边界越来越模糊,市场竞争也随之愈演愈烈.近年来,某通讯运营商在业务的转型.网络的转型取得了巨大的突破,但人力资源管理的转 ...
- 前端开发---ppt展示页面评论区展示
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 由于后端同学希望按照 sta ...
- java知识总结（更新中）
一.java 数据类型 基本类型(byte.short.int. long. char.float.double.boolean) 数字类型 整数型:byte(8).short(16).int(32) ...