- Tree View လုပ်နည်း
CSS နှင့် JavaScript ဖြင့် သစ်ပင်မြင်ကွင်းဖန်တီးနည်းကို လေ့လာပါ။
သစ်ပင်မြင်ကွင်း
သစ်ပင်မြင်ကွင်းတစ်ခုသည် အကြောင်းအရာတစ်ခုစီတွင် အခွဲအရေအတွက်များစွာရှိနိုင်သည့် သတင်းအချက်အလက်၏ အထက်အောက်မြင်ကွင်းကို ကိုယ်စားပြုသည်။
သစ်ပင်အကိုင်းအခက်များကို ဖွင့်ရန် သို့မဟုတ် ပိတ်ရန် မြှား(များ)ကို နှိပ်ပါ။
- ယမကာ
- ရေ
- ကော်ဖီ
- လက်ဖက်ရည်
- Black Tea
- လက်ဖက်ခြောက်
- လက်ဖက်စိမ်း
- Sencha
- Gyokuro
- Matcha
- Pi Lo Chun
သစ်ပင်မြင်ကွင်း
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<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>
အဆင့် 2) CSS ကိုထည့်ပါ
ဥပမာ
/* 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;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
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");
});
}
Tree View ကို အမှန်ခြစ်ပါ။
ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် ကတ်အစား "မဲပုံး" ယူနီကုဒ်ကို အသုံးပြုသည်-