PHP基础教程（116）PHP调用JavaScript脚本之制作二级导航菜单：当PHP大叔邂逅JS小姐姐：联手打造“会动”的二级导航菜单，代码 CP 我磕了！-优快云博客

一、前言：这俩咋凑一对儿的？

如果你刚开始学Web开发，可能觉得PHP和JavaScript像住在两个星球的生物：一个在服务器端默默干活，一个在浏览器里花式炫技。但今天我们要撮合这对CP，让PHP大叔（稳重靠谱）和JS小姐姐（灵动活泼）牵手成功，共同制作一个会响应、会下拉、会卖萌的二级导航菜单！

你可能见过很多网站，鼠标移到“产品”或“服务”上，唰一下弹出子菜单——这背后往往是PHP和JavaScript的“混合双打”。PHP负责准备菜单数据（比如从数据库读取），JavaScript负责让菜单“动起来”。简单说就是：PHP备菜，JS炒菜，用户吃菜。

接下来，我们边侃边写，从原理到代码，让你彻底搞懂这对CP的协作秘诀！

二、基础脑补：PHP和JS的“职场分工”

1. PHP大叔：后台社畜，勤劳朴实

PHP是一种服务器端脚本语言，它的活儿都在服务器上干完，再把结果（通常是HTML）送给浏览器。比如：

<?php
$menu = [
    '首页' => '#',
    '产品' => ['PHP教程', 'JS教程', 'AI编程'],
    '关于' => '#'
];
?>

PHP可以动态生成导航菜单的结构，比如从数据库拉取菜单项，处理用户权限（某些菜单只对管理员显示）等。

2. JS小姐姐：前端甜心，灵动百变

JavaScript在浏览器里运行，专管交互效果。比如：

document.querySelector('.menu-item').addEventListener('mouseenter', function() {
    this.style.backgroundColor = 'pink';
});

没有JS，菜单就是个纯文本列表；有了JS，它才能下拉、渐变、响应鼠标。

3. 他俩咋沟通？—— JSON助攻！

PHP和JS之间传递数据，常用JSON（JavaScript Object Notation）。PHP把数组或对象转换成JSON字符串，JS收到后解析成自己可操作的对象。就像PHP大叔写好情书（JSON），JS小姐姐拆开就能读。

三、动手！二级导航菜单实现四步走

步骤1：PHP准备菜单数据（厨房备菜）

假设我们从数据库或配置文件中获取菜单结构，这里用模拟数据：

<?php
$navItems = [
    [
        'text' => '首页',
        'url' => '/',
        'children' => []
    ],
    [
        'text' => '产品中心',
        'url' => '#',
        'children' => [
            ['text' => 'Web开发工具', 'url' => '/web-tools'],
            ['text' => 'AI辅助编程', 'url' => '/ai-help'],
            ['text' => '云服务器', 'url' => '/cloud']
        ]
    ],
    [
        'text' => '学习指南',
        'url' => '#',
        'children' => [
            ['text' => 'PHP入门', 'url' => '/php-guide'],
            ['text' => 'JS高级技巧', 'url' => '/js-tricks'],
            ['text' => '数据库设计', 'url' => '/db-design']
        ]
    ],
    [
        'text' => '联系我们',
        'url' => '/contact',
        'children' => []
    ]
];
?>

步骤2：PHP生成HTML结构（摆盘上桌）

PHP循环遍历数据，输出菜单的HTML骨架。注意：二级菜单默认隐藏（用CSS隐藏），等JS来触发显示。

<nav class="nav-menu" id="mainNav">
    <ul>
        <?php foreach (