Goret,
примерно так ... не самое оптимальное дерево данных и функция, но для примера достаточно ... по красному можно кликать.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type='text/css'>
li > ul {
display: none;
}
li.opened > ul {
display: block;
}
.selfSwitcher {
color: red;
cursor: pointer;
}
.selfSwitcher > ul {
color: #0000FF;
cursor: default;
}
</style>
</head>
<body>
<script>
var data = [
{"text": "Пример",
"tag": "H4"},
{"text": "",
"tag": "UL",
"child": [{
"text": "Apocalyptica",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Reflections",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "No Education",
"tag": "LI"
}, {
"text": "Prologue",
"tag": "LI"
}, {
"text": "Faraway",
"tag": "LI"
}, {
"text": "Somewhere Around Nothing",
"tag": "LI"
}]
}]
}, {
"text": "Amplified",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Enter Sandman",
"tag": "LI"
}, {
"text": "Harmageddon",
"tag": "LI"
}, {
"text": "Nothing Else Matters",
"tag": "LI"
}]
}]
}]
}]
}, {
"text": "Rammstein",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Mutter",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "Mein Herz Brennt",
"tag": "LI",
"child": [{
"text": "",
"tag": "UL",
"child": [{
"text": "mp3",
"tag": "LI"
}, {
"text": "4Mb",
"tag": "LI"
}, {
"text": "Industrial",
"tag": "LI"
}]
}]
}, {
"text": "Links 234",
"tag": "LI"
}, {
"text": "Sonne",
"tag": "LI"
}, {
"text": "Ich Will",
"tag": "LI"
}]
}]
}]
}]
}]
}]
function recursiveList(c) {
return c.map(function(a) {
var b = document.createElement(a.tag);
a.text && b.appendChild(document.createTextNode(a.text));
a.child && recursiveList(a.child).forEach(function(a) {
b.appendChild(a)
});
a.child && "LI" == a.tag && (b.className = "selfSwitcher", b.addEventListener("click", function(a) {
a = a.target;
a == b && a.classList.toggle("opened")
}));
return b
})
};
data = recursiveList(data);
data.forEach(function(a) {
document.body.appendChild(a)
})
</script>
</body>
</html>