80 lines
1.5 KiB
HTML
80 lines
1.5 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<style>
|
|
.tree span:hover {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tree span {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<meta charset="utf-8">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<ul class="tree" id="tree">
|
|
<li>Animals
|
|
<ul>
|
|
<li>Mammals
|
|
<ul>
|
|
<li>Cows</li>
|
|
<li>Donkeys</li>
|
|
<li>Dogs</li>
|
|
<li>Tigers</li>
|
|
</ul>
|
|
</li>
|
|
<li>Other
|
|
<ul>
|
|
<li>Snakes</li>
|
|
<li>Birds</li>
|
|
<li>Lizards</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>Fishes
|
|
<ul>
|
|
<li>Aquarium
|
|
<ul>
|
|
<li>Guppy</li>
|
|
<li>Angelfish</li>
|
|
</ul>
|
|
</li>
|
|
<li>Sea
|
|
<ul>
|
|
<li>Sea trout</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<script>
|
|
// move all text into <span>
|
|
// they occupy exactly the place necessary for the text,
|
|
for (let li of tree.querySelectorAll('li')) {
|
|
let span = document.createElement('span');
|
|
li.prepend(span);
|
|
span.append(span.nextSibling); // move the text node into span
|
|
}
|
|
|
|
// catch clicks on whole tree
|
|
tree.onclick = function(event) {
|
|
|
|
if (event.target.tagName != 'SPAN') {
|
|
return;
|
|
}
|
|
|
|
let childrenContainer = event.target.parentNode.querySelector('ul');
|
|
if (!childrenContainer) return; // no children
|
|
|
|
childrenContainer.hidden = !childrenContainer.hidden;
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|