Nasıl Yapılır - Ağaç Görünümü
CSS ve JavaScript ile bir ağaç görünümü oluşturmayı öğrenin.
Ağaç görünümü
Ağaç görünümü, her öğenin bir dizi alt öğeye sahip olabileceği hiyerarşik bir bilgi görünümünü temsil eder.
Ağaç dallarını açmak veya kapatmak için ok(lar)a tıklayın.
- İçecekler
- Suçlu
- Kahve
- Çay
- Siyah çay
- Beyaz çay
- Yeşil çay
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
Ağaç görünümü
Adım 1) HTML'yi ekleyin:
Örnek
<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>
Adım 2) CSS'yi ekleyin:
Örnek
/* 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;
}
Adım 3) JavaScript'i ekleyin:
Örnek
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");
});
}
Onay Kutusu Ağacı Görünümü
Bu örnekte, şapka yerine bir "oy sandığı" unicode'u kullanıyoruz: