Question

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

我试图做一个文件树结构。基本上我需要一个UL HTML元素来使用JS正确地改变它的显示属性，代码使用一个UL元素，但如果有两个UL元素（兄弟）它不会。

请查看代码段。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

只需使用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 个答案: