兄弟姐妹的HTML属性不会随JS更改

Question

I believe the simplest way to explain my problem is directly running the code snippet. 我相信解释我的问题的最简单方法是直接运行代码片段。

I'm trying to do a file tree structure. 我正在尝试做一个文件树结构。 Basically I need an UL HTML element to properly change it's display property using JS, the code works with one UL element but if there is two UL elements (siblings) it doesn't. 基本上，我需要一个UL HTML元素来使用JS正确更改其显示属性，该代码可与一个UL元素一起使用，但是如果有两个UL元素（同级）则不会。

Please take a look at the code snippet. 请查看代码段。

 function init_php_file_tree() { if (!document.getElementsByTagName) return; var aMenus = document.getElementsByTagName("LI"); for (var i = 0; i < aMenus.length; i++) { var mclass = aMenus[i].className; if (mclass.indexOf("pft-directory") > -1) { var submenu = aMenus[i].childNodes; for (var j = 0; j < submenu.length; j++) { if (submenu[j].tagName == "A") { submenu[j].onclick = function() { var node = this.nextSibling; while (1) { if (node != null) { if (node.tagName == "UL") { var d = (node.style.display == "none") node.style.display = (d) ? "block" : "none"; this.className = (d) ? "open" : "closed"; return false; } node = node.nextSibling; } else { return false; } } return false; } submenu[j].className = (mclass.indexOf("open") > -1) ? "open" : "closed"; } if (submenu[j].tagName == "UL") submenu[j].style.display = (mclass.indexOf("open") > -1) ? "block" : "none"; } } } return false; } jQuery(init_php_file_tree);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li class="pft-directory"> <a class="closed" href="#"> Parent directory </a> <ul style="display: none;"> <li class="pft-file ext-pdf"> File Name </li> <li class="pft-file ext-doc"> Another File Name </li> <p> *Note that when you see this files you should also be able to see the directories in this same level</p> </ul> <!-- This second UL element never change it's display property with the current JS --> <ul style="display: none;"> <li class="pft-directory"> Directory Name </li> <li class="pft-directory"> Another Directory Name </li> </ul> </li> </ul> </body> </html>

Answer 1

Just use jquery methods toggle and toggleClass 只需使用jquery方法toggle和toggleClass

 function init_php_file_tree() { $('.pft-directory a').on('click', function() { var a = $(this) a.toggleClass('closed'); $('ul', a.parent()).toggle(); }); }; jQuery(init_php_file_tree);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li class="pft-directory"> <a class="closed" href="#">Parent directory </a> <ul style="display: none;"> <li class="pft-file ext-pdf">File Name </li> <li class="pft-file ext-doc">Another File Name </li> </ul> <ul style="display: none;"> <li class="pft-directory">Directory Name </li> <li class="pft-directory">Another Directory Name </li> </ul> </li> <!-- There's a problem with your solution (and maybe with my question, sorry!). If you have more than 2 directories in the same level they all expand and collapse, no matter wich one you click --> <li class="pft-directory"> <a class="closed" href="#">Parent directory </a> <ul style="display: none;"> <li class="pft-file ext-pdf">File Name </li> <li class="pft-file ext-doc">Another File Name </li> </ul> <ul style="display: none;"> <li class="pft-directory">Directory Name </li> <li class="pft-directory">Another Directory Name </li> </ul> </li> </ul> </body> </html>

兄弟姐妹的HTML属性不会随JS更改

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-03-16 18:47:59

兄弟姐妹的HTML属性不会随JS更改

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-03-16 18:47:59

解决方案1
0 已采纳 2018-03-16 18:47:59