Bootstrap 4 ยุบ
พับได้แบบพื้นฐาน
พับมีประโยชน์เมื่อคุณต้องการซ่อนและแสดงเนื้อหาจำนวนมาก:
ตัวอย่าง
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
ตัวอย่างที่อธิบาย
คลาส.collapseระบุองค์ประกอบที่ยุบได้ (a <div> ในตัวอย่างของเรา); นี่คือเนื้อหาที่จะแสดงหรือซ่อนด้วยการคลิกปุ่ม
ในการควบคุม (แสดง/ซ่อน) เนื้อหาที่ยุบได้ ให้เพิ่มdata-toggle="collapse"แอตทริบิวต์ในองค์ประกอบ <a> หรือ <button> จากนั้นเพิ่มdata-target="#id"แอตทริบิวต์เพื่อเชื่อมต่อปุ่มกับเนื้อหาที่ยุบได้ (<div id="demo">)
หมายเหตุ:สำหรับองค์ประกอบ <a> คุณสามารถใช้hrefแอตทริบิวต์แทนdata-target
แอตทริบิวต์ได้:
ตัวอย่าง
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
ตามค่าเริ่มต้น เนื้อหาที่ยุบได้จะถูกซ่อนไว้ อย่างไรก็ตาม คุณสามารถเพิ่ม.showคลาสเพื่อแสดงเนื้อหาตามค่าเริ่มต้นได้:
ตัวอย่าง
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
หีบเพลง
ตัวอย่างต่อไปนี้แสดงหีบเพลงแบบง่ายโดยการขยายส่วนประกอบการ์ด
หมายเหตุ:ใช้data-parentแอตทริบิวต์เพื่อให้แน่ใจว่าองค์ประกอบที่ยุบได้ทั้งหมดภายใต้พาเรนต์ที่ระบุจะถูกปิดเมื่อมีการแสดงรายการที่ยุบได้รายการใดรายการหนึ่ง
ตัวอย่าง
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
ทำการอ้างอิงการยุบ Bootstrap 4 ให้สมบูรณ์
สำหรับการอ้างอิงที่สมบูรณ์ของตัวเลือกการยุบ เมธอด และเหตุการณ์ทั้งหมด ไปที่ Bootstrap 4 JS Collapse Referenceของเรา