JS Collapse (collapse.js)
ได้รับรูปแบบฐานและการสนับสนุนที่มีความยืดหยุ่นสำหรับส่วนประกอบพับเหมือน accordions และระบบนำทาง
พึ่งพาปลั๊กอิน: ยุบต้องเปลี่ยนปลั๊กอินจะรวมอยู่ในรุ่นของเงินทุน
สำหรับการสอนเกี่ยวกับ Collapsibles อ่านของเรา Bootstrap Collapse กวดวิชา
The Collapse Plugin Classes
| ชั้น | ลักษณะ | ตัวอย่าง |
|---|---|---|
| .collapse | ซ่อนเนื้อหา | ลองมัน |
| .collapse in | แสดงเนื้อหา | ลองมัน |
| .collapsing | เพิ่มเมื่อการเปลี่ยนแปลงเริ่มต้นและเอาออกเมื่อเสร็จสิ้น | ลองมัน |
ผ่าน data-* แอตทริบิวต์
เพียงแค่เพิ่ม data-toggle="collapse" และข้อมูลเป้าหมายเพื่อที่จะกำหนดองค์ประกอบการควบคุมขององค์ประกอบพับอัตโนมัติ แอตทริบิวต์ข้อมูลเป้าหมายยอมรับเลือก CSS จะนำไปใช้เพื่อการล่มสลาย ให้แน่ใจว่าจะเพิ่มการล่มสลายของชั้นเรียนไปยังองค์ประกอบพับ หากคุณต้องการที่จะเริ่มต้นเปิดเพิ่มระดับเพิ่มเติมใน
ตัวอย่าง
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
ลองตัวเอง» เคล็ดลับ: การเพิ่มการจัดการกลุ่มหีบเพลงเหมือนการควบคุมพับเพิ่มข้อมูลแอตทริบิวต์ data-parent="#selector"
ผ่านทางจาวาสคริปต์
เปิดใช้งานด้วยตนเอง:
$('.collapse').collapse()ตัวเลือกการล่มสลาย
ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ DATA- ในขณะที่ data-parent=""
| ชื่อ | ชนิด | ค่าเริ่มต้น | ลักษณะ |
|---|---|---|---|
| parent | selector | false | องค์ประกอบพับทั้งหมดภายใต้การปกครองที่ระบุจะถูกปิดเมื่อรายการพับนี้จะแสดงให้เห็นว่า (คล้ายกับพฤติกรรมหีบเพลงแบบดั้งเดิม - นี้จะขึ้นอยู่กับระดับแผง) - ดูตัวอย่างด้านล่าง |
| toggle | boolean | true | สลับองค์ประกอบพับเกี่ยวกับการภาวนา |
วิธีการล่มสลาย
ตารางต่อไปนี้แสดงวิธีการล่มสลายที่มีอยู่ทั้งหมด
| วิธี | ลักษณะ | ลองมัน |
|---|---|---|
| .collapse( options ) | เปิดใช้งานองค์ประกอบพับที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง | |
| .collapse("toggle") | สลับองค์ประกอบพับ | ลองมัน |
| .collapse("show") | แสดงให้เห็นถึงองค์ประกอบพับ | ลองมัน |
| .collapse("hide") | ซ่อนองค์ประกอบพับ | ลองมัน |
เหตุการณ์ยุบ
ตารางต่อไปนี้แสดงเหตุการณ์ล่มสลายที่มีอยู่ทั้งหมด
| เหตุการณ์ | ลักษณะ | ลองมัน |
|---|---|---|
| show.bs.collapse | เกิดขึ้นเมื่อองค์ประกอบที่พับเป็นเรื่องเกี่ยวกับที่จะแสดง | ลองมัน |
| shown.bs.collapse | เกิดขึ้นเมื่อองค์ประกอบพับก็แสดงให้เห็นอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
| hide.bs.collapse | เกิดขึ้นเมื่อองค์ประกอบที่พับเป็นเรื่องเกี่ยวกับที่จะถูกซ่อนไว้ | ลองมัน |
| hidden.bs.collapse | เกิดขึ้นเมื่อองค์ประกอบพับถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) | ลองมัน |
ตัวอย่าง
ง่ายพับ
ตัวอย่างต่อไปนี้จะทำให้ปุ่มสลับเนื้อหาที่ขยายตัวและยุบตัวลงขององค์ประกอบอื่น:
ตัวอย่าง
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
Lorem ipsum dolor sit amet, consectetur
adipisicing elit,
sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</div> ลองตัวเอง» แผงพับ
ตัวอย่างต่อไปนี้แสดงให้เห็นแผงพับ:
ตัวอย่าง
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<div
class="panel-body">Panel Body</div>
<div
class="panel-footer">Panel Footer</div>
</div>
</div>
</div> ลองตัวเอง» พับกลุ่มรายการ
ต่อไปนี้จะแสดงให้เห็นแผงพับกับกลุ่มรายการภายใน:
ตัวอย่าง
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1"
class="panel-collapse collapse">
<ul
class="list-group">
<li
class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div> ลองตัวเอง» หีบเพลง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงหีบเพลงง่ายโดยการขยายส่วนประกอบแผง:
หมายเหตุ: data-parent แอตทริบิวต์ทำให้แน่ใจว่าองค์ประกอบพับทั้งหมดภายใต้การปกครองที่ระบุจะถูกปิดเมื่อหนึ่งในรายการที่จะแสดงยุบ
ตัวอย่าง
<div class="panel-group" id="accordion">
<div class="panel
panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible
Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse
collapse in">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible
Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4
class="panel-title">
<a
data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible
Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse
collapse">
<div class="panel-body">Lorem
ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad
minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div> ลองตัวเอง» ขยายและยุบสลับไอคอนและข้อความ
ตัวอย่างต่อไปนี้การเปลี่ยนแปลงข้อความเปิด / ปิดและไอคอนเมื่อเปิดและปิดเนื้อหาพับ:
ตัวอย่าง
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); ลองตัวเอง» หรือคุณสามารถใช้ CSS:
ตัวอย่าง
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} ลองตัวเอง»