လုပ်နည်း - ခေါက်သိမ်းပါ။
တွဲနိုင်သောအပိုင်းကို ဖန်တီးနည်းကို လေ့လာပါ။
အထူးပင်
တွဲ၍ရနိုင်သော အကြောင်းအရာကို ပြသခြင်းနှင့် ဝှက်ခြင်းကြားတွင် ပြောင်းရန် ခလုတ်ကို နှိပ်ပါ။
အထူးတလည် အကြောင်းအရာအချို့။ တွဲ၍ရနိုင်သော အကြောင်းအရာကို ပြသခြင်းနှင့် ဝှက်ခြင်းကြားတွင် ပြောင်းရန် ခလုတ်ကို နှိပ်ပါ။ နာကျင်မှုကိုယ်တိုင်က အရေးကြီးသော်လည်း နာကျင်မှုကို adipiscing လုပ်ငန်းစဉ်ဖြင့် မြှင့်တင်ပေးသော်လည်း ကြီးကျယ်သောအလုပ်နှင့် နာကျင်မှုကို ဖြတ်တောက်ရန် အချိန်ပေးပါသည်။ သို့မှသာ အများစုအတွက်၊ ကျွန်ုပ်တို့ထဲမှ မည်သူတစ်ဦးတစ်ယောက်သည် ယင်းမှ ရည်ရွယ်ချက်များကို အခွင့်ကောင်းယူရန်မှတပါး မည်သည့်အလုပ်အကိုင်မျိုးကိုမဆို ကျင့်သုံးလာမည်ဖြစ်သည်။
Collapsible တစ်ခုဖန်တီးပါ။
အဆင့် 1) HTML ကိုထည့်ပါ
ဥပမာ
<button type="button" class="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
အဆင့် 2) CSS ကိုထည့်ပါ
အကော်ဒီယံပုံစံ
ဥပမာ
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.content {
padding: 0 18px;
display:
none;
overflow: hidden;
background-color: #f1f1f1;
}
အဆင့် 3) JavaScript ကိုထည့်ပါ။
ဥပမာ
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click",
function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display
=== "block") {
content.style.display =
"none";
} else {
content.style.display = "block";
}
});
}
ကာတွန်းကို ခေါက်သိမ်း၍ရနိုင်သော (ပွတ်ဆွဲချ)
ကာတွန်းကို ခေါက်သိမ်းနိုင်စေရန် max-height: 0
၊ အမြင့်ဆုံး-အမြင့်ပိုင်ဆိုင်မှုအတွက် overflow: hidden
နှင့် a ကို အတန်းထဲသို့ ပေါင်းထည့်ပါ။transition
panel
max-height
ထို့နောက်၊ မတူညီသောစခရင်အရွယ်အစားရှိ panel ၏အမြင့်ပေါ် မူတည်၍ တွက်ချက်သတ်မှတ်ခြင်းဖြင့် အကြောင်းအရာကို လျှောချရန် JavaScript ကိုသုံးပါ
-
ဥပမာ
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var
coll =
document.getElementsByClassName("collapsible");
var i;
for (i = 0; i <
coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight =
content.scrollHeight + "px";
}
});
}
</script>
အိုင်ကွန်များထည့်ပါ။
တွဲ၍ရနိုင်သော အကြောင်းအရာကို ဖွင့်ခြင်း သို့မဟုတ် ပိတ်ခြင်းရှိမရှိ ညွှန်ပြရန် ခလုတ်တစ်ခုစီသို့ သင်္ကေတတစ်ခုထည့်ပါ-
ဥပမာ
.collapsible:after {
content: '\02795'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}