在 Javascript 中折叠和展开树结构
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30945681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Collapse and Expand Tree structure in Javascript
提问by user1893874
I need a help on collapse and Expand using Javascript. Here is my running code (.html)
我需要有关使用 Javascript 折叠和展开的帮助。这是我的运行代码 (.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>
<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>
If you run this html, you will get out put as
如果你运行这个 html，你会得到这样的结果
Name
Name
on click of Name, it is showing all the child elements
单击名称，它会显示所有子元素
Name: Address: Subject:On click of Subject it is showing Id
Name: Address: Subject: . IdWhat i want here is each child should open only on parent click.
Name: Address: Subject:单击主题时，它会显示 ID
Name: Address: Subject: . Id我在这里想要的是每个孩子都应该只在父母点击时打开。
When run the html, only Name will dispaly
运行 html 时，只有 Name 会显示
Name:On click of Name, only Address will be displayed as a child element.
Name: Address:
Name:单击名称时，只有地址将显示为子元素。
Name: Address:
Onclick of Address, only Subject will display
点击地址，只显示主题
Name: Address: Subject:
Name: Address: Subject:
Than finally on click of Subject, id will show up
最后点击主题，id 会出现
Name: Address: Subject: . Id
Name: Address: Subject: . Id
How to implement this tree structure. what i am doing wrong here. please suggest me.
如何实现这种树结构。我在这里做错了什么。请建议我。
回答by Nanang Mahdaen El-Agung
Check this:
检查这个：
$('.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>Edit
编辑
If you don't want to use jQuery, you can try this:
如果你不想使用 jQuery，你可以试试这个：
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>回答by Oka
You want to target just the first child element, instead of looping through all of them. You should also try to separate your logic from your markup. Give unobtrusive JavaScripta read.
您只想定位第一个子元素，而不是遍历所有子元素。您还应该尝试将您的逻辑与标记分开。给不显眼的JavaScript读取。
function toggle() {
var ls = this.parentNode.getElementsByTagName('ul')[0],
styles, display;
if (ls) {
styles = window.getComputedStyle(ls);
display = styles.getPropertyValue('display');
ls.style.display = (display === 'none' ? 'block' : 'none');
}
}
var eles = document.querySelectorAll('.ele');
Array.prototype.slice.call(eles).forEach(function (e) {
e.addEventListener('click', toggle);
});ul ul {
display: none;
}
.ele {
cursor: pointer;
}
.ele:hover {
color: red;
}<ul>
<li><span class="ele">One</span>
<ul>
<li><span class="ele">Two</span>
<ul>
<li><span class="ele">Three</span>
<ul>
<li><span class="ele">Four</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>回答by w3debugger
In pure JavaScript
在纯 JavaScript 中
document.querySelector('.tree-structure').addEventListener('click', (e) => {
const el = e.target;
const sibling = el.nextSibling.nextSibling;
if (el && el.className == 'toggle' && sibling) {
sibling.classList.toggle('show');
}
});ul ul {
display: none;
}
.show {
display: block;
}<ul class="tree-structure">
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">1st Level</button>
<ul>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
<li>
<button class="toggle">2nd Level</button>
<ul>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
<li>
<button class="toggle">3rd Level</button>
<ul>
<li>
<button class="toggle">4th Level</button>
</li>
<li>
<button class="toggle">4th Level</button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>