PHP树形视图优化：区分主/子类别显示样式问题求助

原代码 #

function showcategory($parentid)
{
     $sql = "select * from categories where parent_id='".$parentid."'";
     $result = mysqli_query($GLOBALS['conn'],$sql);
     $output ="<ul id='tree1'>
";
    while($data=mysqli_fetch_array($result))
    {
        $output.="<li>
".$data['name'];
        $output.=showcategory($data['id']);
        $output.="</li>";
    }
    $output.="</ul>";
    return $output;
}

问题 #

我用上面的PHP代码实现了树形视图，能正确拉取类别和子类别，但没法区分主/子类别：数据库categories表有个字段，值1是主类别，值0是子类别，现在所有类别都用<li>展示，还都带CSS加的文件夹图标。我要改成：

• 主类别（值1）：显示带可展开文件夹图标的列表项
• 子类别（值0）：只显示文字，不带文件夹图标

当前显示情况 #

所有类别都带文件夹图标，层级展示，但看不出哪个是主类哪个是子类。

想要的显示效果 #

主类别有文件夹图标，能展开子项；子类别只有文字，无图标，层级清晰。

修改后的代码 #

function showcategory($parentid)
{
     $sql = "select * from categories where parent_id='".$parentid."'";
     $result = mysqli_query($GLOBALS['conn'],$sql);
     // 没子项就返回空，避免生成空列表
     if(mysqli_num_rows($result) == 0) {
         return '';
     }
     $output = "<ul>";
    while($data=mysqli_fetch_array($result))
    {
        // 替换这里的`category_type`为你数据库里标记主/子类别的实际字段名
        $isMain = $data['category_type'] == 1;
        // 给不同类型的li加不同类名，方便CSS控制
        $liClass = $isMain ? 'main-cat' : 'sub-cat';
        $output .= "<li class='{$liClass}'>{$data['name']}";
        // 只有主类别才递归加载子项
        if($isMain) {
            $output .= showcategory($data['id']);
        }
        $output .= "</li>";
    }
    $output .= "</ul>";
    return $output;
}

配套CSS示例 #

/* 主类别：显示文件夹图标 */
.main-cat {
    list-style: none;
    padding-left: 22px;
    position: relative;
    cursor: pointer; /* 加鼠标手型，提示可展开 */
}
.main-cat::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    background: url('你的文件夹图标路径') no-repeat center / cover;
}
/* 子类别：纯文本无图标 */
.sub-cat {
    list-style: none;
    padding-left: 22px;
}

注意点 #

• 把代码里的category_type改成你数据库中实际标记主/子类别的字段名
• 替换CSS里的文件夹图标路径为你实际的图标文件路径
• 如果需要可折叠功能，还可以给主类别加JS事件控制子列表的显示/隐藏

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