<!DOCTYPE HTML>
<html>
<head>
<style>
.tree span:hover {
font-weight: bold;
}
.tree span {
cursor:pointer;
/*damn! its to show that its clickable*/
}
</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>
for (let li of tree.querySelectorAll('li')) {
let span = document.createElement('span');
//oh...we are creating an element to use. interesting
li.prepend(span);
//prepanding means inserting contents, specified by parameter
//TO THE FUCKING BEGINNING OF THE PREDOT ELEM
span.append(span.nextSibling);
//append the same,
//but TO THE FUCKING END OF THE PREDOT ELEM
}
tree.onclick = function(event){
if(event.target.tagName != 'SPAN') {
return;
}//go down only if it is a span,
//span is parent of li, child of ul, inbetween
let childrenContainer = event.target.parentNode.querySelector('ul');
//it should be the span, if null, return
if (!childrenContainer) return;
childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
</body>
</html>
<html>
<head>
<style>
.tree span:hover {
font-weight: bold;
}
.tree span {
cursor:pointer;
/*damn! its to show that its clickable*/
}
</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>
for (let li of tree.querySelectorAll('li')) {
let span = document.createElement('span');
//oh...we are creating an element to use. interesting
li.prepend(span);
//prepanding means inserting contents, specified by parameter
//TO THE FUCKING BEGINNING OF THE PREDOT ELEM
span.append(span.nextSibling);
//append the same,
//but TO THE FUCKING END OF THE PREDOT ELEM
}
tree.onclick = function(event){
if(event.target.tagName != 'SPAN') {
return;
}//go down only if it is a span,
//span is parent of li, child of ul, inbetween
let childrenContainer = event.target.parentNode.querySelector('ul');
//it should be the span, if null, return
if (!childrenContainer) return;
childrenContainer.hidden = !childrenContainer.hidden;
}
</script>
</body>
</html>
댓글
댓글 쓰기