in English

ทรุด

สลับการมองเห็นเนื้อหาในโครงการของคุณด้วยคลาสสองสามคลาสและปลั๊กอิน JavaScript ของเรา

มันทำงานอย่างไร

ปลั๊กอิน JavaScript ยุบใช้เพื่อแสดงและซ่อนเนื้อหา ปุ่มหรือจุดยึดถูกใช้เป็นทริกเกอร์ที่จับคู่กับองค์ประกอบเฉพาะที่คุณสลับ การยุบองค์ประกอบจะทำให้ค่าปัจจุบันเคลื่อนไหวheightจากค่าปัจจุบัน0เป็น เมื่อพิจารณาว่า CSS จัดการกับภาพเคลื่อนไหวอย่างไร คุณไม่สามารถใช้paddingกับ.collapseองค์ประกอบได้ ให้ใช้คลาสเป็นองค์ประกอบการห่ออิสระแทน

เอฟเฟกต์ภาพเคลื่อนไหวของส่วนประกอบนี้ขึ้นอยู่กับ prefers-reduced-motionคิวรีสื่อ ดู ส่วนการเคลื่อนไหวที่ลดลงของเอกสารการช่วยสำหรับการเข้าถึงของเรา

ตัวอย่าง

คลิกปุ่มด้านล่างเพื่อแสดงและซ่อนองค์ประกอบอื่นผ่านการเปลี่ยนแปลงคลาส:

  • .collapseซ่อนเนื้อหา
  • .collapsingถูกนำไปใช้ในระหว่างช่วงการเปลี่ยนภาพ
  • .collapse.showแสดงเนื้อหา

โดยทั่วไป เราแนะนำให้ใช้ปุ่มที่มีdata-targetแอตทริบิวต์ แม้ว่าจะไม่แนะนำจากมุมมองเชิงความหมาย คุณยังสามารถใช้ลิงก์ที่มีhrefแอตทริบิวต์ (และrole="button") ได้ ในทั้งสองกรณีdata-toggle="collapse"จำเป็นต้องมี

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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องค์ประกอบลูกเท่านั้นที่จำเป็น

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
<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แอตทริบิวต์

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.
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.
<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ชั้นเรียน

Some placeholder content for the second accordion panel. This panel is hidden by default.

And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
<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 ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

.collapse(options)

เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบที่ยุบได้ ยอมรับตัวเลือกobjectเสริม

$('#myCollapsible').collapse({
  toggle: false
})

.collapse('toggle')

สลับองค์ประกอบที่ยุบได้เพื่อแสดงหรือซ่อน กลับไปยังผู้เรียกก่อนที่องค์ประกอบที่ยุบได้จะถูกแสดงหรือซ่อนจริง ๆ (กล่าวคือ ก่อนที่ เหตุการณ์ shown.bs.collapseor 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...
})