|
Сообщение от рони
|
|
надо брать объект и отображать его текущее состояние,
|
примерно так ... кликайте по названиям
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", function() {
const data = {
child: {
all: {
child: {
running: {
child: {
cat: {
child: {
cat1: {
title: 'mmm'
},
cat2: {
title: 'ppp'
}
}
},
dog: {
child: {
dog1: {
title: 'rrr'
},
dog2: {
title: 'gav'
}
}
}
}
},
flying: {
child: {
bird: {
child: {
bird1: {
title: 'fly'
}
}
}
}
}
},
}
},
show: true
}
const createHtml = data => {
let ul = document.createElement('ul');
if (data.child) {
for (let key in data.child) {
let li = document.createElement('li');
li.textContent = key;
ul.append(li);
li.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
data.child[key].show = !data.child[key].show;
create();
})
let el = data.child[key],
show = data.child[key].show;
if (typeof el == 'object' && show) li.append(createHtml(el))
}
}
if (data.title) {
let li = document.createElement('li');
li.textContent = `my name is ${data.title}`;
ul.append(li);
}
return ul
}
const create = () => {
let html = createHtml(data);
document.querySelector('.test').innerHTML = '';
document.querySelector('.test').append(html)
}
create()
})
</script>
</head>
<body>
<div class="test"></div>
</body>
</html>