基于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
随机推荐
- C#写文本日志帮助类(支持多线程)改进版(不适用于ASP.NET程序)
由于iis的自动回收机制,不适用于ASP.NET程序 代码: using System; using System.Collections.Concurrent; using System.Confi ...
- [C#] 多线程总结(结合进度条)
线程生命周期(来源 w3cschool) 未启动状态:当线程实例被创建但 Start 方法未被调用时的状况. 就绪状态:当线程准备好运行并等待 CPU 周期时的状况. 不可运行状态: 已经调用 Sle ...
- 使用SignalR实现服务端消息推送
概述 这篇文章参考的是Server Broadcast with SignalR 2这篇教程,很不错的一篇教程,如果有兴趣的话可以查看原文,今天记录下来作为一个学习笔记,这样今后翻阅会更方便一点. 这 ...
- C#开发微信门户及应用(24)-微信小店货架信息管理
在前面微信小店系列篇<C#开发微信门户及应用(22)-微信小店的开发和使用>里面介绍了一些微信小店的基础知识,以及<C#开发微信门户及应用(23)-微信小店商品管理接口的封装和测试& ...
- 单台机器配置redis多实例
1.增加/usr/local/redis/etc中拷贝一份配置文件重新命名为redis6483.conf 2.编辑redis6483.conf daemonize yes //以后台进程启动 pid ...
- 高性能 TCP & UDP 通信框架 HP-Socket v3.3.1
HP-Socket 是一套通用的高性能 TCP/UDP 通信框架,包含服务端组件.客户端组件和 Agent 组件,广泛适用于各种不同应用场景的 TCP/UDP 通信系统,提供 C/C++.C#.Del ...
- SVN为什么比Git更好
首先我表明一个根本的立场,我个人更喜欢用Git,但是,这仅仅是一个个人偏好.当我们需要将一种技术方案带给整个团队的时候,并不是由我们的个人偏好作为主要决定因素,而应该充分去权衡利弊,选择对团队,对公司 ...
- GUID生成器
这个GUID生成器是一个小巧的软件,属于笔者在空余时间开发的. http://pan.baidu.com/s/1sk6VGpn
- 简易版自定义BaseServlet
这几天在学Java Web,一直在思考Servlet重用的问题,就用java的反射机制实现自定义的简易版BaseServlet; 该方式有点像struts2 利用映射获取前端的参数.有兴趣的同学可以自 ...
- 读《乔布斯的NeXT和苹果之间,隔了这两个创业常识》
原文链接:http://wwww.huxiu.com/article/114950/1.html 前言: 当今硅谷风头最劲的风险投资家马克·安德森曾说,硅谷每年大约诞生15-20家真正值得投资的公司. ...