Hoe - Boomstructuur
Leer hoe u een boomstructuur maakt met CSS en JavaScript.
Boom zicht
Een boomstructuur vertegenwoordigt een hiërarchische weergave van informatie, waarbij elk item een aantal subitems kan hebben.
Klik op de pijl(en) om de boomtakken te openen of te sluiten.
- dranken
- Water
- Koffie
- Thee
- Zwarte thee
- Witte thee
- Groene thee
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Boom zicht
Stap 1) HTML toevoegen:
Voorbeeld
<ul id="myUL">
<li><span class="caret">Beverages</span>
<ul class="nested">
<li>Water</li>
<li>Coffee</li>
<li><span
class="caret">Tea</span>
<ul
class="nested">
<li>Black Tea</li>
<li>White Tea</li>
<li><span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Stap 2) CSS toevoegen:
Voorbeeld
/* Remove default bullets */
ul, #myUL {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
#myUL {
margin: 0;
padding: 0;
}
/* Style the caret/arrow */
.caret {
cursor: pointer;
user-select: none; /* Prevent text selection */
}
/* Create the caret/arrow with a unicode, and
style it */
.caret::before {
content: "\25B6";
color: black;
display: inline-block;
margin-right: 6px;
}
/* Rotate the
caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
transform: rotate(90deg);
}
/* Hide the nested list */
.nested {
display: none;
}
/* Show the nested list when the user clicks on the caret/arrow (with
JavaScript) */
.active {
display: block;
}
Stap 3) JavaScript toevoegen:
Voorbeeld
var toggler = document.getElementsByClassName("caret");
var i;
for
(i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click",
function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
Selectievakje Boomstructuur
In dit voorbeeld gebruiken we een "stembus" unicode in plaats van een caret: