js把多级数据以多级子菜单形式输出

最新推荐文章于 2021-07-15 13:22:37 发布

yCodeM

最新推荐文章于 2021-07-15 13:22:37 发布

阅读量2.6k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_38594777/article/details/83902215

版权

本文介绍如何利用JavaScript的递归方法将多级数据转换为多级子菜单的显示形式，适用于网页交互中的下拉菜单或导航栏的构建。

摘要由CSDN通过智能技术生成

js以递归实现：

var city = [
	{	name : "北京", 
		children : [
			{ name : "海淀区",
			  children : [
			  { name : "1环",
				children : [
				{ name : "10环"},
				{ name : "11环"}
				]
			  
			  },
			  { name : "2环"}
				]
			},
			{ name : "朝阳区"}
		]
		
	},
	{    name : "浙江",
	     children : [
		  { name : "杭州"},
		  { name : "宁波"}
	    ]

	},
	{  name : "广东", 
       children : [
		{ name : "1环"},
		{ name : "2环"}
	   ]
	},
	{  name : "深圳" }
];


function getChild( parents ){
	var childUl = "";

	if( parents){
	for(var i = 0; i < parents.length; i++ ){ 
	
	childUl += "<li>" + parents[i].name + "</li>";	//同级元素用li标签
		
	   if(parents[i].children){ //判断是否当前元素是否有子节点
				
		var childNode = getChild( parents[i].children ); //返回子节点
			
		//把子字节点