<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding-left: 0.5em;
}
.handle {
background: transparent url(/images/spacer.png);
background-repeat: no-repeat;
background-position: center bottom;
display: block;
float: left;
width: 10px;
height: 11px;
}
.collapsed {
background: transparent url(/images/plus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
.expanded {
background: transparent url(/images/minus-black.png);
background-repeat: no-repeat;
background-position: center bottom;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="treeview.min.css" />
<script src="treeview.min.js"></script>
<script>
$(document).ready(function() {
jQuery("#tree ul").hide();
jQuery("#tree li").each(function() {
var handleSpan = jQuery("<span></span>");
handleSpan.addClass("handle");
handleSpan.prependTo(this);
if(jQuery(this).has("ul").size() > 0) {
handleSpan.addClass("collapsed");
handleSpan.click(function() {
var clicked = jQuery(this);
clicked.toggleClass("collapsed expanded");
clicked.siblings("ul").toggle();
});
}
});
})
</script>
<div>
<div id="page-header" >
<h1>Terms and Conditions</h1>
<div class="col-lg-7">
<p class="bs-component">
<a href="#" class="btn btn-primary">Expand All</a>
<a href="#" class="btn btn-primary">Show hide regions</a>
</p>
<p class="bs-component">
<a href="#" class="btn btn-primary">Collapse All</a>
<a href="#" class="btn btn-primary">Show hide countries</a>
</p>
</div>
</div>
<div class="bs-component">
<table class="table table-striped table-hover">
<thead>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
<td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
<td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
<td><a href="#" class="btn btn-xs btn-primary">Edit</a></td>
</tr>
<tr>
<td>xxxx</td>
<td>xxxx</td>
<td>xxxx</td>
<td>Comment</td>
<td>Region</td>
<td>Country A</td>
<td>xxxx</td>
<td>xxxx</td>
</tr>
</thead>
</table>
</div>
<div id="Details" style="border:groove">
<ul id="tree">
<li>
Section A
<ul>
<li> Line Item
<ul>
<li>
<table class="table table-striped table-hover">
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
<tr>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
<td>xxxxx</td>
</tr>
</table>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>我需要在包含展开和折叠的html页面中创建 TreeView
就像附图中一样。 
它也应该是页面中的两个按钮，一个应该折叠所有头发，另一个应该展开它们。
这段代码用于在行的级别上折叠和扩展，但我需要知道是否有一个现成的 jquery 东西可以为我绘制，并且更简单和易于使用，而不是从构建东西从头开始
最佳答案
有很多 jQuery 插件可以实现简单的 html 树网格结构，并具有展开和折叠功能。
“TreeGrid Jquery 插件”是一个很好的插件，您可以使用它来快速启动。 请按照 http://maxazan.github.io/jquery-treegrid/ 中的文档进行操作很快，您就可以得到您想要的东西。
关于javascript - 如何在包含展开和折叠的html页面中创建 TreeView ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39891782/