基于bootstrap样式的tree，

最新推荐文章于 2018-08-20 21:08:12 发布
最新推荐文章于 2018-08-20 21:08:12 发布
阅读量145 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/herd/p/6114044.html
版权

<!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>

运行效果：

转载于:https://www.cnblogs.com/herd/p/6114044.html

weixin_30527423
关注
基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
11-22
基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单基于bootstrap-treeview做的一个漂亮的无限分类树层级联动菜单
bootstrap tree
11-04
Bootstrap Tree是一款由百丽企业技术团队自主研发的前端组件，它基于流行的Bootstrap框架，为开发者提供了构建美观、实用的树形结构界面的能力。Bootstrap Tree插件的设计理念是将易用性与功能实用性相结合，使得在...
Bootstrap-Tree
陌上花开，可缓缓归矣
02-25 1万+
这里的Tree指的是树形菜单，这篇博客通过一个实例来讲解一下，在Bootstrap框架下怎么去建立一个树形菜单。前提：先添加Bootstrap和JQ的引用<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css"> <script src="bootstrap-3.3.0
JS组件系列——Bootstrap 树控件使用经验分享
weixin_33755847的博客
01-12 856
前言：很多时候我们在项目中需要用到树，有些树仅仅是展示层级关系，有些树是为了展示和编辑层级关系，还有些树是为了选中项然后其他地方调用选中项。不管怎么样，树控件都是很多项目里面不可或缺的组件之一。今天，博主打算结合自己的使用经历和网上找到的一些不错的树控件在这里做一个分享，希望能帮大家找到最合适的控件。还是那句话：控件没有最好，只有最合适。 一、JQuery树形控件 Jquery树形控件是一款基...
Bootstrap Tree View，简单而优雅的树结构组件
热门推荐
沉默王二
06-15 8万+
简单而优雅，我喜欢这两个词。 那么今天的实例是通过Bootstrap Tree View来制作一款省市级菜单的应用。
bootstrap-treeview
xiaoyushiying的专栏
07-28 5749
bootstrap-treeview 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。  插件依赖 Bootstrap v3.0.3jQuery v2.0.3 以上两
bootstrap-tree-view demo
03-12
Bootstrap Tree View是一款基于Bootstrap框架和jQuery的开源插件，它为网页开发提供了美观且功能丰富的多级列表树视图。这个插件使得在网页中展示层次结构的数据变得简单易行，广泛应用于导航菜单、文件目录展示、...
Bootstrap Tree View+demo
01-23
Bootstrap Tree View是一个基于Bootstrap框架的插件，用于创建交互式的树型视图，常用于构建层级结构的数据展示，如导航菜单、文件系统或组织结构。这个插件利用了Bootstrap的CSS样式和JavaScript组件，提供了美观且...
基于Bootstrap table组件实现多层表头的实例代码
08-29
在本文中，我们将分享基于Bootstrap Table组件实现多层表头的实例代码。 多层表头是指在表格中实现多个层次的表头，每个层次可以包含多个列。这种结构常用于展示复杂的数据关系，例如树形结构的数据。Bootstrap ...
基于bootstrap的jQuery树形菜单插件 EasyTree
01-20
Bootstrap作为最流行的前端框架之一，提供了丰富的组件和样式，而EasyTree则是基于Bootstrap的jQuery树形菜单插件，它为开发者提供了创建美观、易用的树形菜单的解决方案。 1. **jQuery与Bootstrap基础** - jQuery...
bootstrap风格的树形插件zTree
01-12
这是一款使用 bootstrap风格的树形插件 zTree树形插件
ztree_bootstrap样式风格
04-08
ztree可以使用bootstrap风格，压缩包中有使用说明和对应的文件
bootStrap风格的zTree
12-20
BootStrap风格的zTree,非常的漂亮。让你的界面拥有自然的优雅
基于Jquery和bootStarp的zTree树形展示
06-14
基于Jquery和bootStarp的zTree树形展示，直接有demo可以直接使用
bootstrap树状图
半块菠萝的博客
11-24 5717
bootstrap树状图列表
bootstrap 表格 树
zaige66的博客
08-20 2051
前言       最近要弄一下表格树，项目用的是 bootstrap 模板，所以很容易就搜到了 官网的例子 http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/treegrid.html，但是复制到自己的项目中时，一直出不来层级的效果，在排除代码错误后，狠下心来把项目中用到 css 与 js 一个个与官网的 css 与 js 进行...
bootstrap tree及json
lt289597的专栏
06-07 7109
bootstrap tree及json一直做android开发的，好多年不做web项目了，突然team有一个web小项目要我上，然后就迅速连搜带查的把之前的web相关知识捡了捡。 但是对于最近流行的一些技术还是稍微有一点陌生，bootstrap就是其中之一，但是一般做了很久开发的人，对于新技术应该是学习很快，所以参考网上的例子，再结合api，一般的问题都能顺利解决。 这里针对bootstrap
bootstrap-tree-table cannot read properties of null
最新发布
08-23
引用:基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便。引用的内容并未提及bootstrap-tree-table。 关于报错"bootstrap-tree-table cannot read properties of null"，这个错误通常发生在引用了一个空值的属性或方法时。这可能是因为在使用bootstrap-tree-table插件时，某个属性或方法没有正确地被设置或者加载。 要解决这个问题，你可以进行以下的尝试： 1. 确保你正确地引入了bootstrap-tree-table的相关文件，包括样式文件和JavaScript文件。检查文件路径是否正确，并确保文件已经成功加载。 2. 检查你的代码中是否存在拼写错误或者语法错误。特别是在设置属性或调用方法时，确保正确地命名和使用了对应的名称。 3. 确定你的HTML结构和JavaScript代码的顺序是否正确。插件的初始化和配置通常需要在HTML加载完毕后进行，所以确保你的代码在正确的时机进行初始化。 4. 查看一下官方文档或者插件的使用说明，确认你是否正确地配置了插件的属性和方法。 如果以上的解决方法都没有解决问题，你可以尝试搜索相关的错误信息或者寻求插件的官方支持。<span class="em">1</span> #### 引用[.reference_title] - *1* [基于bootstrap-table 实现 右侧列固定](https://download.csdn.net/download/david_xgl/86400417)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值