无限级目录树的实现。前端面试题

刚听到这几词的时候可能觉得有点高大上,现在有很多公司的上机面试题 会出来这个问题
大概就是实现下面的效果

后台返回一个有规律的菜单选项选项 然后在页面上实现这样的效果
当然是动态加载的
我们做个小demo吧

大搞就是这样的效果 能点击展开和关闭
1.像层级不深的 我们可以使用for循环嵌套实现
菜单类 我们一般都是 使用 ul +li 嵌套的方式 实现的

<div class="tree"></div>
//这个是html代码

// css样式
ul{
	list-style: none;
		transition: 0.5s;
	}
	ul li span{
			color: red;
			border: 1px solid #1890ff;
			width: 15px;
			height: 15px;
			display: inline-block;
			text-align: center;
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 10px;
			line-height: 15px;
			cursor: pointer;
	}

// js这块 我偷个懒 使用jquery来实现的
下面实现是的 子级有三层嵌套的菜单实现方式
通过 字符串拼接 来实现
最后追加到 dom树上

<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
$(function(){
	var str="<ul>";// 声明一个 开头的ul标签 字符串
	for(var i=0;i<data.length;i++){
		str+="<li>"+data[i].name;
		if(data[i].child){
			str+="<ul>";
			for(var j=0;j<data[i].child.length;j++){
				str+="<li>"+data[i].child[j].name;
				if(data[i].child[j].child){
					str+="<ul>";
					for(var k=0;k<data[i].child[j].child.length;k++){
						str+="<li>"+data[i].child[j].child[k].name+"</li>"
					}
					str+="</ul>"
				}
				str+="</li>";
			}
			str+="</ul>";
		}
		str+="</li>";
	}
	str+="</ul>";
	$('.tree').html(str);
})

当然上面的这种方式在 只是适合于 层级比较浅的 或者知道后台传过来的数据层级是多少的
而且维护起来的也是很麻烦的 下面我们采用一种递归的方式解决
2.// 递归要传入一个参数 必须有终止条件 否则就会把你的浏览器搞崩了

function createTree(data){
		var str="<ul>";
		for(var i=0;i<data.length;i++){
			str+="<li><span>-</span>"+data[i].name
			if(data[i].child){ // 递归调用 必须得有终止条件
				str+=createTree(data[i].child)
			}
			str+="</li>";
		}
		str+="</ul>";
		return str;
	}
	$('.tree').html(createTree(data));

只要你的层级 不超过45层 而且一般也没那么深的菜单 有用户也懒得点了
后台不无需告诉你层级 是多少 他会自动查找解决的 维护起来的 也比较方便
3.同时 下面我们也优化一下

var lists=$('.tree ul li');// 页面第一次进入的时候 子级菜单都是隐藏的 前面显示 +号
   $.each(lists,function(item,index){
	   $(this).find('ul').hide();
	   $(this).find('span').text('+');
   })

添加点击事件
// 因为我们下层的li和上层的li都会有点击事件 就会出现事件冒泡的问题

$('.tree ul li').click(function(e){
	   e.stopPropagation();// 阻止冒泡
	   e.preventDefault();// 阻止默认行为
	   // 判断下面是否有 ul子集  is(":visible") 判断元素是否显示了
	   if($(this).find("ul").is(':visible')){
		   // 隐藏
		   $(this).find('ul').hide();
		   $(this).find('span').text('+');
	   }else{
		   $(this).find('ul').show();
		   $(this).find('span').text('-')
	   }
   })

好了 希望最后能帮到大家 觉得有用的可以点个赞 ^{__ __}

生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！加油 奥利给！