兄弟姐妹的HTML属性不会随JS改变 [英] HTML property of siblings not changing with JS

问题描述

我相信解释我的问题最简单的方法是直接运行代码片段。

我正在尝试创建文件树结构。基本上我需要一个UL HTML元素来使用JS来正确地改变它的显示属性，这个代码适用于一个UL元素，但是如果有两个UL元素（同级），它不会。

请看代码片段。

 函数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）？ 打开关闭;返回false; } node = node.nextSibling; } else {return false; }} return false; }子菜单[j] .className =（mclass.indexOf（open）> -1）？ 打开关闭; } 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> <标题>< /标题> < /头> <身体GT; < UL> < li class =pft-directory> < a class =closedhref =＃>父目录< / a> < ul style =display：none;> < li class =pft-file ext-pdf>档案名称< / li> < li class =pft-file ext-doc>另一个档案名称< / li> < p为H. *请注意，当您看到这些文件时，您也应该能够看到相同级别的目录< / p> < / UL> <！ - 这第二个UL元素从不改变它与当前JS的显示属性 - > < ul style =display：none;> < li class =pft-directory>目录名称< / li> < li class =pft-directory>另一个电话号码簿名称< / li> < / UL> < /锂> < / UL> < / body>< / html>

解决方案

使用jquery方法 toggle 和 toggleClass

function init_php_file_tree（）{$（'。pft-directory a' {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> <标题>< /标题> < /头> <身体GT; < UL> < li class =pft-directory> < a class =closedhref =＃>父目录< / a> < ul style =display：none;> < li class =pft-file ext-pdf>档案名称< / li> < li class =pft-file ext-doc>另一档案名称< / li> < / UL> < ul style =display：none;> < li class =pft-directory>目录名称< / li> < li class =pft-directory>另一个目录名称< / li> < / UL> < /锂> <！ - 您的解决方案存在问题（也许与我的问题，对不起！）。如果您在同一级别拥有超过2个目录，则它们都会展开并折叠，无论您点击哪个目录 - > < li class =pft-directory> < a class =closedhref =＃>父目录< / a> < ul style =display：none;> < li class =pft-file ext-pdf>档案名称< / li> < li class =pft-file ext-doc>另一档案名称< / li> < / UL> < ul style =display：none;> < li class =pft-directory>目录名称< / li> < li class =pft-directory>另一个目录名称< / li> < / UL> < /锂> < / UL> < / body>< / html>

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.

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>

解决方案

Just use jquery methods toggle and 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改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！