在Javascript中折叠和展开树结构
[英]Collapse and Expand Tree structure in Javascript
问题描述
我需要有关崩溃的帮助和使用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>
如果你运行这个html，你会得到的
Name
点击Name，它显示所有子元素
Name: Address: Subject:点击主题，它显示Id
Name: Address: Subject: . Id我想要的是每个孩子只能在父母点击时打开。
运行html时，只有名称会显示
Name:单击“名称”时，只有“地址”将显示为子元素。
Name: Address:
点击地址，只显示主题
Name: Address: Subject:
最后点击主题，id会出现
Name: Address: Subject: . Id
如何实现这个树结构。 我在这里做错了什么。 请建议我。
3 个解决方案
解决方案1
8 已采纳 2015-06-19 19:20:29
检查一下：
$('.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，可以试试这个：
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>
解决方案2
2 2015-06-19 19:36:41
您希望仅定位第一个子元素，而不是遍历所有子元素。 您还应该尝试将逻辑与标记分开。 给不引人注目的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>
解决方案3
0 2019-05-17 08:40:50
在纯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>
单击时展开和折叠 TR 标签 - 文件夹树结构
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.