刚听到这几词的时候可能觉得有点高大上,现在有很多公司的上机面试题 会出来这个问题
大概就是实现下面的效果
后台返回一个有规律的菜单选项选项 然后在页面上实现这样的效果
当然是动态加载的
我们做个小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('-')
}
})
好了 希望最后能帮到大家 觉得有用的可以点个赞 __ __
生活那么苦,为啥不给自己一颗糖吃呢!坚持下去!你会看到不一样的风景!加油 奥利给!