JavaScript ဖြင့် Spoiler ဖန်တီးခြင်း

ယခုကျွန်ုပ်တို့သည် spoiler များပြုလုပ်နည်းကို သင်ယူပါမည်။ Spoiler ဆိုသည်မှာ အထူးလင့်ခ်တစ်ခုကို အသုံးပြု၍ ဖွင့်နိုင် (သို့မဟုတ်) ပိတ်နိုင်သော ဘလောက်များကို ဆိုလိုပါသည်။

အောက်ပါကုဒ်နမူနာတွင် spoiler အတန်းပါသော စာပိုဒ်သည် spoiler တစ်ခုဖြစ်ပြီး toggle အတန်းပါသော လင့်ခ်သည် ကလစ်နှိပ်ခြင်းဖြင့် ၎င်း spoiler ကို ပြသရန် (သို့) ဖျောက်ရန် ဖြစ်ပါသည်။

<p>
	စာသားပါသော စာပိုဒ်
	<a href="" class="toggle">ဖွင့်ပါ</a>
</p>
<p class="spoiler">
	ဖျောက်ထားသော spoiler
</p>
<p>
	စာသားပါသော စာပိုဒ်
</p>

စာသားထဲတွင် spoiler များစွာရှိနိုင်ပြီး တစ်ခုစီတွင် သက်ဆိုင်ရာ လင့်ခ်တစ်ခုစီ ရှိရပါမည်။

<p>
	စာသားပါသော စာပိုဒ်
</p>
<p>
	စာသားပါသော စာပိုဒ်
	<a href="" class="toggle">spoiler 1 ကိုဖွင့်ပါ</a>
</p>
<p class="spoiler">
	ဖျောက်ထားသော spoiler 1
</p>
<p>
	စာသားပါသော စာပိုဒ်
</p>
<p>
	စာသားပါသော စာပိုဒ်
	<a href="" class="toggle">spoiler 2 ကိုဖွင့်ပါ</a>
</p>
<p class="spoiler">
	ဖျောက်ထားသော spoiler 2
</p>
<p>
	စာသားပါသော စာပိုဒ်
</p>

သိသာထင်ရှားသည်မှာ ဖွင့်ရန်လင့်ခ်နှင့် spoiler ကိုယ်နှိုက်ကို တစ်နည်းနည်းဖြင့် ချိတ်ဆက်ပေးရန် လိုအပ်ပါသည်။ ရွေးချယ်စရာများစွာကို တွေးဆနိုင်သော်လည်း ဤကိစ္စတွင် ကျွန်ုပ်သည် တည်နေရာအရ ပြုလုပ်ရန် အဆိုပြုပါသည်။ ဥပမာ၊ toggle အတန်းပါသော လင့်ခ်သည် ၎င်း၏မိဘ element အောက်တွင် တစ်ခါတည်းတည်ရှိသော spoiler အတန်းပါ element ကို ဖွင့်ပေး (သို့) ပိတ်ပေးသည်ဟု ဆိုကြပါစို့။

Spoiler ကို ပုံသေအားဖြင့် ဖျောက်ထားပြီး ကျွန်ုပ်တို့ ပြသလိုပါက ၎င်းကို active အတန်းပေးပါမည်။ သက်ဆိုင်ရာ CSS ကုဒ်ကို ရေးကြပါစို့။

.spoiler:not(.active) {
	display: none;
}

ဖော်ပြပါ HTML နှင့် CSS ကုဒ်များကို သင့်ထံသို့ ကူးယူပါ။ ဖော်ပြပါ spoiler များ၏လုပ်ဆောင်ချက်ကို အကောင်အထည်ဖော်ပါ။