javascript、CSS 和 PHP 文件夹树

Question

我正在通过 javascript 和 PHP 制作文件夹树。

那是我的 PHP 代码：

function getSubDirectories($dirName) {

    $ffs = scandir($dirName);

    unset($ffs[array_search('.', $ffs, true)]);
    unset($ffs[array_search('..', $ffs, true)]);

    // prevent empty ordered elements
    if (count($ffs) < 1)
        return;

    echo '<ul class = "mainFolder">';

    foreach($ffs as $ff) {
        if(is_dir($dirName.'/'.$ff)) {
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff;
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</span></li>';
    }
    echo '</ul>';
        
    }
    //getSubDirectories("../deneme");
?>

这是我的 javascript 代码：

function hideFolder(ID) {

    var elementID = ID;
    
    var element = document.getElementById(elementID);
    var firstChildOfelement = element.firstElementChild;
    console.log(ID);
    //console.log(element.childNodes);

    if (firstChildOfelement.style.display == "none") {
        firstChildOfelement.style.display = "";
    }   
    else {
        firstChildOfelement.style.display = "none";
    }
}

这是我的 CSS 文件

.rootFolder {
    margin: 0;
    padding: 0;
    cursor:pointer;
}

.subFolder {
    /*margin-left: 2.5em;*/
    /* list-style: square inside url("Folder-icon.png");*/

    padding-left:2.5em;
    /*list-style-type: disc;*/
}

.mainFolder {
    padding:0 ;
}

  .subFolderSpan:hover {
      background-color: aquamarine;
  }

我的问题是：当我在列表项上时，所有 parents 都改变了它们的背景颜色。不仅仅是我所在的项目。这是 CSS 问题。我试着做了一个没有PHP的无序列表结构，然后没有出现问题。

a screenshot for CSS problem

当我点击一个 span 时，onclick 影响不起作用。我收到这个错误

folderTree.js:7 Uncaught TypeError: Cannot read property 'firstElementChild' of null
    at hideFolder (folderTree.js:7)
    at HTMLSpanElement.onclick (getFolders.php:15)

如果我在控制台上编写相同的代码，它就可以工作。

感谢您的帮助...

Answer 1

我解决了这个问题。在我编辑此部分后：

 echo '<ul class = "mainFolder">';
    foreach($ffs as $ff){
        
        if(is_dir($dirName.'/'.$ff)){
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff;
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</span></li>';
    }
    echo '</ul>';

像那样:

 echo '<ul class = "mainFolder">';
    foreach($ffs as $ff){
        
        if(is_dir($dirName.'/'.$ff)){
            echo "<li class = 'subFolder'  ><span class = 'subFolderSpan' onclick = hideFolder(this.id) id = ".$ff.">".$ff."</span>";
            getSubDirectories($dirName.'/'.$ff);
        } 
        echo '</li>';
    }
    echo '</ul>';

javascript、CSS 和 PHP 文件夹树

javascript, CSS and PHP folder tree

javascript

css

php

treeview

directory-structure