ทรุด
สลับการมองเห็นเนื้อหาในโครงการของคุณด้วยคลาสสองสามคลาสและปลั๊กอิน JavaScript ของเรา
มันทำงานอย่างไร
ปลั๊กอิน JavaScript ยุบใช้เพื่อแสดงและซ่อนเนื้อหา ปุ่มหรือจุดยึดถูกใช้เป็นทริกเกอร์ที่จับคู่กับองค์ประกอบเฉพาะที่คุณสลับ การยุบองค์ประกอบจะทำให้ค่าปัจจุบันเคลื่อนไหวheight
จากค่าปัจจุบัน0
เป็น เมื่อพิจารณาว่า CSS จัดการกับภาพเคลื่อนไหวอย่างไร คุณไม่สามารถใช้padding
กับ.collapse
องค์ประกอบได้ ให้ใช้คลาสเป็นองค์ประกอบการห่ออิสระแทน
prefers-reduced-motion
คิวรีสื่อ ดู
ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา
ตัวอย่าง
คลิกปุ่มด้านล่างเพื่อแสดงและซ่อนองค์ประกอบอื่นผ่านการเปลี่ยนแปลงคลาส:
.collapse
ซ่อนเนื้อหา.collapsing
ถูกนำไปใช้ในระหว่างช่วงการเปลี่ยนภาพ.collapse.show
แสดงเนื้อหา
โดยทั่วไป เราแนะนำให้ใช้ปุ่มที่มีdata-target
แอตทริบิวต์ แม้ว่าจะไม่แนะนำจากมุมมองเชิงความหมาย คุณยังสามารถใช้ลิงก์ที่มีhref
แอตทริบิวต์ (และrole="button"
) ได้ ในทั้งสองกรณีdata-toggle="collapse"
จำเป็นต้องมี
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
แนวนอน
ปลั๊กอินยุบยังสนับสนุนการยุบในแนวนอน เพิ่ม.width
คลาสตัวแก้ไขเพื่อเปลี่ยน the width
แทนheight
และตั้งค่า a width
บนองค์ประกอบลูกทันที รู้สึกอิสระที่จะเขียน Sass แบบกำหนดเองของคุณ ใช้รูปแบบอินไลน์ หรือใช้ยูทิลิตี้ความกว้างของ เรา
min-height
ชุดเพื่อหลีกเลี่ยงการทาสีซ้ำมากเกินไปในเอกสารของเรา แต่ก็ไม่ได้บังคับอย่างชัดแจ้ง
เฉพาะwidth
องค์ประกอบลูกเท่านั้นที่จำเป็น
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
</div>
หลายเป้าหมาย
A <button>
หรือ<a>
สามารถแสดงและซ่อนองค์ประกอบหลายรายการโดยอ้างอิงด้วยตัวเลือก JQuery ในhref
หรือdata-target
แอตทริบิวต์ หลาย รายการ <button>
หรือ<a>
สามารถแสดงและซ่อนองค์ประกอบได้หากแต่ละรายการอ้างอิงด้วยhref
หรือdata-target
แอตทริบิวต์
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
</div>
</div>
</div>
</div>
ตัวอย่างหีบเพลง
คุณสามารถ ใช้ ส่วนประกอบ การ์ดเพื่อขยายลักษณะการยุบเริ่มต้นเพื่อสร้างหีบเพลงได้ เพื่อให้ได้สไตล์หีบเพลงอย่างถูกต้องต้องแน่ใจว่าใช้.accordion
เป็นเสื้อคลุม
.show
ชั้นเรียน
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</div>
</div>
</div>
</div>
การเข้าถึง
อย่าลืมเพิ่มaria-expanded
องค์ประกอบการควบคุม คุณลักษณะนี้แสดงให้เห็นอย่างชัดเจนถึงสถานะปัจจุบันขององค์ประกอบที่ยุบได้ซึ่งเชื่อมโยงกับการควบคุมกับโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน หากองค์ประกอบที่ยุบได้ถูกปิดโดยค่าเริ่มต้น แอตทริบิวต์บนองค์ประกอบการควบคุมควรมีค่าaria-expanded="false"
เป็น หากคุณได้ตั้งค่าให้เปิดองค์ประกอบที่ยุบได้โดยค่าเริ่มต้นโดยใช้show
คลาส ให้ตั้งค่าaria-expanded="true"
บนตัวควบคุมแทน ปลั๊กอินจะสลับแอตทริบิวต์นี้โดยอัตโนมัติในการควบคุมโดยพิจารณาจากการเปิดหรือปิดองค์ประกอบที่ยุบได้ (ผ่าน JavaScript หรือเนื่องจากผู้ใช้เรียกองค์ประกอบการควบคุมอื่นที่เชื่อมโยงกับองค์ประกอบที่ยุบได้เดียวกัน) หากองค์ประกอบ HTML ขององค์ประกอบการควบคุมไม่ใช่ปุ่ม (เช่น<a>
หรือ<div>
) แอตทริบิวต์role="button"
ควรเพิ่มองค์ประกอบ
หากองค์ประกอบการควบคุมของคุณกำหนดเป้าหมายไปยังองค์ประกอบที่ยุบได้เพียงองค์ประกอบเดียว เช่นdata-target
แอตทริบิวต์ชี้ไปที่id
ตัวเลือก คุณควรเพิ่มaria-controls
แอตทริบิวต์ดังกล่าวไปยังองค์ประกอบควบคุม ซึ่งประกอบด้วยid
องค์ประกอบที่ยุบได้ โปรแกรมอ่านหน้าจอสมัยใหม่และเทคโนโลยีช่วยเหลือที่คล้ายคลึงกันใช้ประโยชน์จากแอตทริบิวต์นี้เพื่อให้ผู้ใช้มีทางลัดเพิ่มเติมเพื่อนำทางไปยังองค์ประกอบที่ยุบได้โดยตรง
โปรดทราบว่าการใช้งานปัจจุบันของ Bootstrap ไม่ครอบคลุมการโต้ตอบคีย์บอร์ดต่างๆ ที่อธิบายไว้ในรูปแบบหีบเพลง ARIA Authoring Practices Guide - คุณจะต้องรวมสิ่งเหล่านี้ด้วย JavaScript ที่กำหนดเอง
การใช้งาน
ปลั๊กอินยุบใช้คลาสสองสามคลาสเพื่อจัดการกับงานหนัก:
.collapse
ซ่อนเนื้อหา.collapse.show
แสดงเนื้อหา.collapsing
ถูกเพิ่มเมื่อการเปลี่ยนแปลงเริ่มต้น และลบออกเมื่อเสร็จสิ้น
คลาสเหล่านี้สามารถพบได้ใน_transitions.scss
.
ผ่านแอตทริบิวต์ข้อมูล
เพียงเพิ่มdata-toggle="collapse"
และ a data-target
ให้กับองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบที่ยุบได้หนึ่งองค์ประกอบขึ้นไปโดยอัตโนมัติ แอตทริบิวต์data-target
ยอมรับตัวเลือก CSS เพื่อปรับใช้การยุบ อย่าลืมเพิ่มคลาสcollapse
ลงในองค์ประกอบที่ยุบได้ หากคุณต้องการให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสshow
เพิ่มเติม
หากต้องการเพิ่มการจัดการกลุ่มแบบหีบเพลงลงในพื้นที่ที่ยุบได้ ให้เพิ่มแอตทริบิวต์data-parent="#selector"
ข้อมูล อ้างถึงการสาธิตเพื่อดูการดำเนินการนี้
ผ่านจาวาสคริปต์
เปิดใช้งานด้วยตนเองด้วย:
$('.collapse').collapse()
ตัวเลือก
ตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript สำหรับแอ็ตทริบิวต์ data ให้ผนวกชื่ออ็อพชันต่อท้ายdata-
เช่นเดียวกับในdata-parent=""
.
ชื่อ | พิมพ์ | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|
พ่อแม่ | ตัวเลือก | วัตถุ jQuery | องค์ประกอบ DOM | เท็จ | หากระบุพาเรนต์ องค์ประกอบที่ยุบได้ทั้งหมดภายใต้พาเรนต์ที่ระบุจะถูกปิดเมื่อแสดงรายการที่ยุบได้นี้ (คล้ายกับพฤติกรรมหีบเพลงแบบดั้งเดิม - ขึ้นอยู่กับcard ชั้นเรียน) ต้องตั้งค่าแอตทริบิวต์บนพื้นที่เป้าหมายที่ยุบได้ |
สลับ | บูลีน | จริง | สลับองค์ประกอบที่ยุบได้ในการเรียกใช้ |
วิธีการ
วิธีการและการเปลี่ยนแบบอะซิงโครนัส
เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น
.collapse(options)
เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบที่ยุบได้ ยอมรับตัวเลือกobject
เสริม
$('#myCollapsible').collapse({
toggle: false
})
.collapse('toggle')
สลับองค์ประกอบที่ยุบได้เพื่อแสดงหรือซ่อน กลับไปยังผู้เรียกก่อนที่องค์ประกอบที่ยุบได้จะถูกแสดงหรือซ่อนจริง ๆ (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.collapse
or hidden.bs.collapse
จะเกิดขึ้น)
.collapse('show')
แสดงองค์ประกอบที่ยุบได้ กลับไปยังผู้เรียกก่อนที่จะแสดงองค์ประกอบที่ยุบได้จริง (เช่น ก่อนที่shown.bs.collapse
เหตุการณ์จะเกิดขึ้น)
.collapse('hide')
ซ่อนองค์ประกอบที่ยุบได้ กลับไปยังผู้เรียกก่อนที่องค์ประกอบที่ยุบได้จะถูกซ่อนจริง ๆ (กล่าวคือ ก่อนที่hidden.bs.collapse
เหตุการณ์จะเกิดขึ้น)
.collapse('dispose')
ทำลายการล่มสลายขององค์ประกอบ
เหตุการณ์
คลาสการยุบของ Bootstrap แสดงเหตุการณ์สองสามเหตุการณ์สำหรับการเชื่อมต่อกับฟังก์ชันการยุบ
ประเภทงาน | คำอธิบาย |
---|---|
show.bs.collapse | เหตุการณ์นี้จะเริ่มทำงานทันทีเมื่อมีshow การเรียกเมธอดของอินสแตนซ์ |
แสดง.bs.ยุบ | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้มองเห็นองค์ประกอบการยุบ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) |
hide.bs.collapse | เหตุการณ์นี้เริ่มทำงานทันทีเมื่อhide มีการเรียกเมธอด |
hidden.bs.collapse | เหตุการณ์นี้เริ่มทำงานเมื่อองค์ประกอบการยุบถูกซ่อนจากผู้ใช้ (จะรอให้การเปลี่ยน CSS เสร็จสมบูรณ์) |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})