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

我的问题是：当我在一个列表项目上时，所有的父母都会改变他们的背景颜色。不仅仅是我正在处理的项目。这是CSS问题。我尝试在没有PHP的情况下创建一个无序的列表结构，然后问题就没有出现。

CSS问题的屏幕截图

当我单击一个跨度时，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>';