Cara - Tampilan Pohon
Pelajari cara membuat tampilan hierarki dengan CSS dan JavaScript.
Pemandangan Pohon
Tampilan hierarki mewakili tampilan informasi hierarkis, di mana setiap item dapat memiliki sejumlah subitem.
Klik panah untuk membuka atau menutup cabang pohon.
- Minuman
- Air
- Kopi
- teh
- Teh hitam
- Teh putih
- Teh hijau
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Pemandangan Pohon
Langkah 1) Tambahkan HTML:
Contoh
<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>
Langkah 2) Tambahkan CSS:
Contoh
/* 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;
}
Langkah 3) Tambahkan JavaScript:
Contoh
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");
});
}
Tampilan Pohon Kotak Centang
Dalam contoh ini, kami menggunakan unicode "kotak suara" alih-alih tanda sisipan: