页面树中始终显示当前位置下一级的导航菜单实现需求

这需求太常见啦——就是要做一个只展示当前页面直接子级的导航菜单，完全贴合你给出的页面树逻辑。我给你拆解下实现思路和具体代码方案：

1. 先把页面树转成可识别的数据结构 #

首先得把你那个层级化的页面结构，转换成代码能读懂的格式，比如JSON：

const pageTree = [
  {
    name: "Index",
    path: "/",
    children: [
      {
        name: "Page 1",
        path: "/page-1",
        children: [
          { name: "Page 1.1", path: "/page-1.1" },
          { name: "Page 1.2", path: "/page-1.2" },
          { name: "Page 1.3", path: "/page-1.3", children: [
            { name: "Page 1.3.1", path: "/page-1.3.1" },
            { name: "Page 1.3.2", path: "/page-1.3.2" }
          ]}
        ]
      },
      {
        name: "Page 2",
        path: "/page-2",
        children: [
          { name: "Page 2.1", path: "/page-2.1" },
          { name: "Page 2.2", path: "/page-2.2", children: [
            { name: "Page 2.2.1", path: "/page-2.2.1" },
            { name: "Page 2.2.2", path: "/page-2.2.2" }
          ]}
        ]
      }
    ]
  }
];

2. 核心逻辑：找到当前页面的直接子节点 #

写个递归函数，根据当前页面的路径定位到对应的节点，然后返回它的直接子级：

function getCurrentPageChildren(currentPath, tree) {
  for (const page of tree) {
    // 匹配到当前页面，直接返回它的子节点
    if (page.path === currentPath) {
      return page.children || [];
    }
    // 递归遍历子节点，继续查找
    if (page.children) {
      const result = getCurrentPageChildren(currentPath, page.children);
      if (result.length > 0) return result;
    }
  }
  return []; // 找不到对应页面时返回空数组
}

3. 动态渲染导航菜单 #

拿到子节点后，把它们转换成HTML菜单渲染到页面上：

function renderNavigation(currentPath) {
  const children = getCurrentPageChildren(currentPath, pageTree);
  const navContainer = document.getElementById("subnav-menu");
  
  // 清空原有菜单内容
  navContainer.innerHTML = "";
  
  // 没有子节点时可以显示提示或者隐藏菜单
  if (children.length === 0) {
    navContainer.innerHTML = "<p>暂无下级菜单</p>";
    return;
  }
  
  // 创建菜单列表
  const ul = document.createElement("ul");
  children.forEach(child => {
    const li = document.createElement("li");
    const link = document.createElement("a");
    link.href = child.path;
    link.textContent = child.name;
    li.appendChild(link);
    ul.appendChild(li);
  });
  
  navContainer.appendChild(ul);
}

// 调用示例：假设当前访问的是Page 1，路径是"/page-1"
renderNavigation("/page-1");

4. 不同场景的适配小技巧 #

• 静态站点（比如Hugo、Jekyll）：根本不用JS，直接用模板引擎的内置变量就行。比如Hugo里用.CurrentPage.Children就能直接拿到当前页面的直接子节点，循环渲染菜单就好。
• 后端渲染（PHP/Node.js）：在后端处理页面树数据，根据请求路径找到对应子节点，再传到模板里渲染，更安全稳定。
• 体验优化：可以给当前页面的父菜单加个active类高亮，或者给当前页面的链接做个样式标记，用户体验会更好。

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