js树形菜单递归函数

树形菜单是一种常见的网页导航结构，其层级关系类似树状结构，可以通过递归函数来实现。

递归函数是一种自我调用的函数，在树形菜单中，递归函数可以用来遍历菜单的层级结构，并展示相应的菜单项。

在JavaScript中，可以使用递归函数来实现树形菜单。首先，我们需要一个菜单的数据结构，通常是一个包含多个对象的数组。每个对象表示一个菜单项，包含以下属性：id（唯一标识符）、name（菜单名称）、children（子菜单项）等。

接下来，我们可以定义一个递归函数，传入一个菜单项和父元素的DOM节点作为参数。函数首先创建一个菜单项的DOM节点，并将其添加到父元素中。然后，递归调用该函数来处理子菜单项，将当前菜单项作为父元素，并将子菜单项传入作为参数，直到所有的菜单项都被处理完成。

具体实现过程如下：

function createMenu(menu, parentElement) {
for(let i = 0; i < menu.length; i++) {
const menuItem = menu[i];
const menuItemElement = document.createElement('li');
menuItemElement.innerHTML = menuItem.name;
parentElement.appendChild(menuItemElement);

if(menuItem.children) {
const subMenuElement = document.createElement('ul');
menuItemElement.appendChild(subMenuElement);
createMenu(menuItem.children, subMenuElement);
}
}
}

// 调用递归函数
const menuData = [
{
id: 1,
name: '菜单1',
children: [
{
id: 2,
name: '菜单1-1',
children: [
{
id: 3,
name: '菜单1-1-1'
},
{
id: 4,
name: '菜单1-1-2'
}
]
},
{
id: 5,
name: '菜单1-2'
}
]
},
{
id: 6,
name: '菜单2'
}
];

const menuElement = document.getElementById('menu');
createMenu(menuData, menuElement);

通过以上代码，我们可以实现一个基本的树形菜单。递归函数的核心思想是在处理每个菜单项时，判断是否存在子菜单，若存在，则创建一个相应的DOM节点，并将其添加到当前菜单项的DOM节点中，然后继续递归调用该函数处理子菜单项，以此类推。这样可以实现对任意层级的树形菜单的创建和展示。