当前，我正在使用此代码在页面中实现树结构。
$("#ShowAllKeys").addClass('active');
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined') {
if (typeof o.openedClass != 'undefined') {
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined') {
closedClass = o.closedClass;
}
}
;
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function () {
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('.tree1').treed();
现在，我将使用 ul 和 li 创建整个树结构，然后运行以上代码以获取所需的设计和扩展/折叠功能。 但是现在我需要实现折叠全部功能，这将关闭所有活动的
目前，我尝试实施Expand all。在全部折叠中，我调用全部展开并执行$（“ li”）。click（）并获得所需的结果。但是，当数据量巨大时，就会引起问题。
扩大我所做的一切
$("li").show();
$("i").removeClass("glyphicon-minus-sign").addClass("glyphicon-plus-sign");
and to collapse all i use this code
$(".col").click(function () {
$("li").show();
$("li").click();
$("i").removeClass("glyphicon-minus-sign").addClass("glyphicon-plus-sign");
});
有人可以帮我实现折叠所有检测到所有扩展li并将其关闭的折叠方法，而不是上述方法。
如果我的完整HTML代码如下：-
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.css">
<script src="https://unpkg.com/multiple-select@1.3.1/dist/multiple-select.min.js"></script>
<style>
.tree, .tree ul {
margin: 0;
padding: 0;
list-style: none
}
.tree ul {
margin-left: 1em;
position: relative
}
.tree ul ul {
margin-left: .5em
}
.tree ul:before {
content: "";
display: block;
width: 0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
border-left: 1px solid
}
.tree li {
margin: 0;
padding: 0 1em;
line-height: 2em;
color: #369;
font-weight: 700;
position: relative
}
.tree ul li:before {
content: "";
display: block;
width: 10px;
height: 0;
border-top: 1px solid;
margin-top: -1px;
position: absolute;
top: 1em;
left: 0
}
.tree ul li:last-child:before {
background: #fff;
height: auto;
top: 1em;
bottom: 0
}
.indicator {
margin-right: 5px;
}
.tree li a {
text-decoration: none;
color: #369;
}
.tree li button, .tree li button:active, .tree li button:focus {
text-decoration: none;
color: #369;
border: none;
background: transparent;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
outline: 0;
}
.rt{
background: #d6f5d6;
}
.failmessage{
alignment: center;
color:#336699;
}
</style>
<style>
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav-right {
float: right;
}
</style>
<script>
function onReadyGo() {
$("#ShowAllKeys").addClass('active');
$.fn.extend({
treed: function (o) {
var openedClass = 'glyphicon-minus-sign';
var closedClass = 'glyphicon-plus-sign';
if (typeof o != 'undefined') {
if (typeof o.openedClass != 'undefined') {
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined') {
closedClass = o.closedClass;
}
}
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function () {
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('.tree1').treed();
$(".exp").click(function () {
$(this).parent().parent().find("li").show();
$(this).parent().parent().find("i").removeClass("glyphicon-plus-sign").addClass("glyphicon-minus-sign");
});
$(".col").click(function () {
$(this).parent().parent().find("li").show();
$(this).parent().parent().find("li").click();
$(this).parent().parent().find("i").removeClass("glyphicon-minus-sign").addClass("glyphicon-plus-sign");
});
}
</script>
</head>
<body onload="onReadyGo()">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading"><b>textdata</b></div>
<div class="panel-body">
<ul class="tree1">
<li>aaa
<ul>
<li>
hi2
<ul>
<li> hi3</li>
</ul>
</li>
</ul>
</li>
<li>akshay
<ul>
<li>
hi2
<ul>
<li> hi3</li>
</ul>
</li>
</ul>
</li>
<li>akshay
<ul>
<li>
hi2
<ul>
<li> hi3</li>
</ul>
</li>
</ul>
</li>
<li>akshay
<ul>
<li>
hi2
<ul>
<li> hi3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>