JS+PHP实现文件夹树CSS hover异常及点击事件报错问题问询

问题1：CSS hover 父级同步变色 #

原因 #

PHP生成的HTML结构嵌套错误：递归输出的子目录<ul>被放在了父级的<span class="subFolderSpan">标签内部，导致子span是父span的子元素，鼠标hover子元素时天然会触发父元素的hover事件，所以父级背景同步变色。

修复方案 #

调整PHP代码的输出顺序，将子目录<ul>放在<li>内、和<span>同级，不要嵌套在span里：

function getSubDirectories($dirName) {
    $ffs = scandir($dirName);
    unset($ffs[array_search('.', $ffs, true)]);
    unset($ffs[array_search('..', $ffs, true)]);
    if (count($ffs) < 1)
        return;
    echo '<ul class="mainFolder">';
    foreach($ffs as $ff) {
        $fullPath = $dirName.'/'.$ff;
        if(is_dir($fullPath)) {
            // 输出li、span，闭合span标签，再递归输出子ul，最后闭合li
            echo "<li class='subFolder'><span class='subFolderSpan' onclick='hideFolder(this)'>".htmlspecialchars($ff)."</span>";
            getSubDirectories($fullPath);
            echo "</li>";
        } else {
            // 非目录的文件单独输出，避免无开标签就关标签的结构错误
            echo "<li class='fileItem'>".htmlspecialchars($ff)."</li>";
        }
    }
    echo '</ul>';
}

额外优化：

• 用htmlspecialchars转义文件名，避免文件名含特殊字符导致HTML结构错乱
• 点击事件直接传this对象，无需传id，规避id相关问题

问题2：点击报错Cannot read property 'firstElementChild' of null #

原因 #

两个核心原因：

1. 直接用文件夹名作为id属性值，如果文件名包含空格、中文、特殊符号，或者不同层级有重名文件夹，会导致id不合法/重复，document.getElementById()找不到对应元素返回null
2. 原有HTML结构混乱，部分span下没有子ul元素，调用firstElementChild自然报错

修复方案 #

修改JS代码适配新的HTML结构，直接用传入的元素本身找下一个兄弟节点的ul即可：

function hideFolder(element) {
    // 找当前span的下一个兄弟元素就是子目录ul
    var subUl = element.nextElementSibling;
    if(!subUl) return; // 没有子目录直接返回，避免报错
    if (subUl.style.display === "none") {
        subUl.style.display = "";
    } else {
        subUl.style.display = "none";
    }
}

可选CSS优化，避免hover背景占满整行：

.subFolderSpan {
    display: inline-block;
}

内容的提问来源于stack exchange，提问作者Wtow