使用JavaScript折叠和展开树结构 [英] Collapse and Expand Tree structure in Javascript
问题描述
我需要使用JavaScript进行折叠和展开的帮助. 这是我的运行代码(.html)
I need a help on collapse and Expand using Javascript. Here is my running code (.html)
<h2>Test</h2>
<html lang="en">
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-16">
<title></title>
<script type="text/javascript">
function toggleDisplay(element)
{
element.style.display = element.style.display === 'none' ? '' : 'none';
};
function toggleDisplayAll(elements)
{
for(var i=0; i<elements.length; i++)
{
toggleDisplay(elements[i]);
}
}
</script>
</head>
<body>
<ul>
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Name:</a>
<ul style="display:none;">
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('ul')); return false;" href="#">Address: </a>
<ul style="display:none;">
<a onclick="toggleDisplayAll(this.parentNode.getElementsByTagName('li')); return false;" href="#">Subject: </a>
<ul style="display:none;">
<li style="display:none;">Id
</li>
</ul>
</ul>
</ul>
</ul>
</body>
</html>
如果运行此html，您将得到显示为
If you run this html, you will get out put as
Name
点击名称"，它会显示所有子元素
on click of Name, it is showing all the child elements
Name:
Address:
Subject:
点击主题"即显示ID
On click of Subject it is showing Id
Name:
Address:
Subject:
. Id
我想要的是每个孩子只应在父母点击时打开.
What i want here is each child should open only on parent click.
运行html时，只会显示名称
When run the html, only Name will dispaly
Name:
单击名称"时，仅地址"将显示为子元素.
On click of Name, only Address will be displayed as a child element.
Name:
Address:
点击地址时，只会显示主题
Onclick of Address, only Subject will display
Name:
Address:
Subject:
最终，单击主题"将显示
Than finally on click of Subject, id will show up
Name:
Address:
Subject:
. Id
如何实现此树结构.我在这里做错了什么.请建议我.
How to implement this tree structure. what i am doing wrong here. please suggest me.
推荐答案
检查此内容:
$('.expand').click(function() {
$('ul', $(this).parent()).eq(0).toggle();
});
ul li ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a class="expand">Root</a>
<ul>
<li>
<a class="expand">Child</a>
<ul>
<li>
<a class="expand">Super Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
修改
如果您不想使用jQuery，可以尝试以下操作:
If you don't want to use jQuery, you can try this:
var expander = document.querySelectorAll('.expand');
for (var i = 0; i < expander.length; ++i) {
expander[i].onclick = function() {
var ul = this.parentElement.querySelectorAll('ul')[0];
if (ul.offsetHeight > 0) {
ul.style.display = 'none';
} else {
ul.style.display = 'block';
}
}
}
ul li ul {
display: none;
}
<ul>
<li>
<a class="expand">Root</a>
<ul>
<li>
<a class="expand">Child</a>
<ul>
<li>
<a class="expand">Super Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
这篇关于使用JavaScript折叠和展开树结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
