如何使用PHP从数据生成三级深度导航栏（采用<ul>结构）

Got it，要做这个三级嵌套的导航栏很简单，咱们分两步来：先把导航数据整理成PHP好处理的结构，再写个简洁的函数生成嵌套<ul>就行。

第一步：整理导航数据 #

先把你给出的层级结构转换成PHP多维数组，这样后续遍历生成HTML会非常方便。示例如下：

$navigationData = [
    'Napkins' => [
        'Colored Napkins' => [
            'American Tradition'
        ],
        'White Beverage Napkins' => [
            'American Digital',
            'American Tradition',
            'American Hi-Speed'
        ],
        'White Luncheon Napkins' => [
            'American Digital',
            'American Tradition',
            'American Hi-Speed'
        ],
        'White Dinner Napkins' => [
            'American Digital',
            'American Classic'
            // 可以继续添加更多三级项
        ]
    ],
    'Plates' => [
        'Eco-Plates' => [
            'American Tradition'
        ],
        'Plastic Trays' => [
            'Disposable Lightweight',
            'Reusable Heavy Duty'
            // 同样可以扩展三级项
        ]
    ]
];

如果你的数据来自数据库，只需要把查询结果转换成这种「一级分类 => 二级分类 => 三级分类数组」的结构就可以直接用。

第二步：编写生成导航的PHP函数 #

用嵌套循环实现，逻辑直观清晰，完全适配固定三级的场景，代码也很简洁：

function generateThreeLevelNav($data) {
    $navHtml = '<ul class="level-1">';
    
    // 遍历一级分类
    foreach ($data as $level1 => $level2Items) {
        $navHtml .= '<li>' . htmlspecialchars($level1);
        
        // 生成二级导航（如果存在）
        if (!empty($level2Items)) {
            $navHtml .= '<ul class="level-2">';
            
            foreach ($level2Items as $level2 => $level3Items) {
                $navHtml .= '<li>' . htmlspecialchars($level2);
                
                // 生成三级导航（如果存在）
                if (!empty($level3Items)) {
                    $navHtml .= '<ul class="level-3">';
                    
                    foreach ($level3Items as $level3) {
                        $navHtml .= '<li>' . htmlspecialchars($level3) . '</li>';
                    }
                    
                    $navHtml .= '</ul>';
                }
                
                $navHtml .= '</li>';
            }
            
            $navHtml .= '</ul>';
        }
        
        $navHtml .= '</li>';
    }
    
    $navHtml .= '</ul>';
    return $navHtml;
}

// 输出导航栏
echo generateThreeLevelNav($navigationData);

生成的HTML结构示例 #

运行代码后会生成完全符合你需求的嵌套<ul>结构，大致如下：

<ul class="level-1">
    <li>Napkins
        <ul class="level-2">
            <li>Colored Napkins
                <ul class="level-3">
                    <li>American Tradition</li>
                </ul>
            </li>
            <li>White Beverage Napkins
                <ul class="level-3">
                    <li>American Digital</li>
                    <li>American Tradition</li>
                    <li>American Hi-Speed</li>
                </ul>
            </li>
            <li>White Luncheon Napkins
                <ul class="level-3">
                    <li>American Digital</li>
                    <li>American Tradition</li>
                    <li>American Hi-Speed</li>
                </ul>
            </li>
            <li>White Dinner Napkins
                <ul class="level-3">
                    <li>American Digital</li>
                    <li>American Classic</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Plates
        <ul class="level-2">
            <li>Eco-Plates
                <ul class="level-3">
                    <li>American Tradition</li>
                </ul>
            </li>
            <li>Plastic Trays
                <ul class="level-3">
                    <li>Disposable Lightweight</li>
                    <li>Reusable Heavy Duty</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

小提示 #

• 我给每个层级的<ul>加了类名（level-1、level-2、level-3），方便你后续用CSS做样式调整，比如添加折叠展开效果。
• 使用htmlspecialchars()是为了防止XSS攻击，如果你的导航数据包含用户输入的内容，这一步非常关键。

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