Gewusst wie: Baumansicht
Erfahren Sie, wie Sie mit CSS und JavaScript eine Baumansicht erstellen.
Baumsicht
Eine Baumansicht stellt eine hierarchische Ansicht von Informationen dar, wobei jedes Element eine Reihe von Unterelementen haben kann.
Klicken Sie auf die Pfeile, um die Äste zu öffnen oder zu schließen.
- Getränke
- Wasser
- Kaffee
- Tee
- Schwarzer Tee
- Weißer Tee
- Grüner Tee
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Baumsicht
Schritt 1) HTML hinzufügen:
Beispiel
<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>
Schritt 2) CSS hinzufügen:
Beispiel
/* 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;
}
Schritt 3) JavaScript hinzufügen:
Beispiel
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");
});
}
Kontrollkästchen Baumansicht
In diesem Beispiel verwenden wir einen "Wahlurnen"-Unicode anstelle eines Caretzeichens: