HTML就一个div大框架
html
<div class="treemenu">
</div>
重中之重的JavaScript部分他来啦!
注释也很清楚哟家人们!
javascript
let data;
let arr = [];
let cons;
let xhr = new XMLHttpRequest();
// 设置请求方式和请求地址
xhr.open('get', './js/tree.json', true);
// 发送请求
xhr.send();
// 接收返回的响应数据
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
data = JSON.parse(xhr.responseText);
// 调用展示商品的函数
// console.log(data);
function inn(data, pid, arr) {
for (let i = 0; i < data.length; i++) {
if (data[i].pid == pid) {
// 递归调用,构建当前节点的子节点数组
data[i].children = inn(data, data[i].id, []);
// 将当前节点加入到父节点的 children 数组中
arr.push(data[i]);
}
}
return arr;
}
arr = inn(data, 0, []);
console.log(arr);
rendertree(arr);
}
};
function rendertree(data) {
let str = `<div class="tree_wrap">`; // 开始构建树的容器
for (let i = 0; i < data.length; i++) {
if (data[i].children.length > 0) { // 如果当前节点有子节点
str +=
`<div onclick="show(this)" class="tree_flex">
<img src="${data[i].icon}" alt="" class="con">${data[i].name}
<span><img src="./img/jtt.png" alt="" class="cons"></span>
</div>
<div style="display:none">`; // 添加可展开的节点和子节点的容器
str += rendertree(data[i].children); // 递归渲染子节点
str += `</div>`;
} else { // 如果当前节点没有子节点
str +=
`<div class="tree_left">
<img src="${data[i].icon}" alt="" class="con">${data[i].name}
</div>`; // 直接添加叶子节点
}
}
str += `</div>`; // 关闭树的容器
document.getElementsByClassName('treemenu')[0].innerHTML = str; // 将整棵树渲染到页面上的指定位置
return str; // 返回树的 HTML 字符串
}
// 获取所有类名为 'tree_left' 的元素集合
let tree_left = document.getElementsByClassName('tree_left');
// 定义展开或折叠子节点的函数
function show(obj) {
let children = obj.nextElementSibling; // 获取当前节点的下一个兄弟元素,即子节点容器
obj.querySelector('.cons').style.transition = "transform 1s"; // 设置箭头图标的过渡效果为1秒
// 判断子节点容器的显示状态
if (children.style.display == 'block') {
// 如果子节点容器是显示的,则隐藏它
children.style.display = 'none'; // 隐藏子节点容器
obj.querySelector('.cons').style.transform = "rotate(0deg)"; // 将箭头图标旋转角度设为0度,折叠状态
} else {
// 如果子节点容器是隐藏的,则显示它
children.style.display = 'block'; // 显示子节点容器
obj.querySelector('.cons').style.transform = "rotate(180deg)"; // 将箭头图标旋转角度设为180度,展开状态
obj.querySelector('.cons').style.transition = "transform 1s"; // 设置箭头图标的过渡效果为1秒
}
}
CSS样式包含了彩色小背景!
css
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradientAnimation 15s ease infinite;
font-family: Arial, sans-serif;
user-select: none;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.treemenu {
width: 30%;
height: 700px;
font-weight: 700;
}
.con {
width: 15px;
height: 15px;
float: left;
margin-top: 7px;
}
.tree_wrap {
margin-left: 20px;
line-height: 30px;
}
.tree_wrap :hover {
color: blue;
}
.cons {
width: 15px;
height: 15px;
margin-left: 2%;
margin-top: 7px;
}
样式图:
想要假数据的私我