ทรุด

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

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

ตัวอย่าง

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

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

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

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-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>

แนวนอน

ปลั๊กอินยุบยังสนับสนุนการยุบในแนวนอน เพิ่ม.collapse-horizontalคลาสตัวแก้ไขเพื่อเปลี่ยน the widthแทนheightและตั้งค่า a widthบนองค์ประกอบลูกทันที รู้สึกอิสระที่จะเขียน Sass แบบกำหนดเองของคุณ ใช้รูปแบบอินไลน์ หรือใช้ยูทิลิตี้ความกว้างของ เรา

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

หลายเป้าหมาย

A <button>หรือ<a>สามารถแสดงและซ่อนองค์ประกอบหลายรายการโดยอ้างอิงด้วยตัวเลือกในองค์ประกอบhrefหรือdata-bs-targetแอตทริบิวต์ หลาย รายการ <button>หรือ<a>สามารถแสดงและซ่อนองค์ประกอบได้หากแต่ละรายการอ้างอิงด้วยhrefหรือdata-bs-targetแอตทริบิวต์

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-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>

การเข้าถึง

อย่าลืมเพิ่มaria-expandedองค์ประกอบการควบคุม คุณลักษณะนี้แสดงให้เห็นอย่างชัดเจนถึงสถานะปัจจุบันขององค์ประกอบที่ยุบได้ซึ่งเชื่อมโยงกับการควบคุมกับโปรแกรมอ่านหน้าจอและเทคโนโลยีช่วยเหลือที่คล้ายคลึงกัน หากองค์ประกอบที่ยุบได้ถูกปิดโดยค่าเริ่มต้น แอตทริบิวต์บนองค์ประกอบการควบคุมควรมีค่าaria-expanded="false"เป็น หากคุณได้ตั้งค่าให้เปิดองค์ประกอบที่ยุบได้โดยค่าเริ่มต้นโดยใช้showคลาส ให้ตั้งค่าaria-expanded="true"บนตัวควบคุมแทน ปลั๊กอินจะสลับแอตทริบิวต์นี้โดยอัตโนมัติในการควบคุมโดยพิจารณาจากการเปิดหรือปิดองค์ประกอบที่ยุบได้ (ผ่าน JavaScript หรือเนื่องจากผู้ใช้เรียกองค์ประกอบการควบคุมอื่นที่เชื่อมโยงกับองค์ประกอบที่ยุบได้เดียวกัน) หากองค์ประกอบ HTML ขององค์ประกอบการควบคุมไม่ใช่ปุ่ม (เช่น<a>หรือ<div>) แอตทริบิวต์role="button"ควรเพิ่มองค์ประกอบ

หากองค์ประกอบการควบคุมของคุณกำหนดเป้าหมายไปยังองค์ประกอบที่ยุบได้เพียงองค์ประกอบเดียว เช่นdata-bs-targetแอตทริบิวต์ชี้ไปที่idตัวเลือก คุณควรเพิ่มaria-controlsแอตทริบิวต์ดังกล่าวไปยังองค์ประกอบควบคุม ซึ่งประกอบด้วยidองค์ประกอบที่ยุบได้ โปรแกรมอ่านหน้าจอสมัยใหม่และเทคโนโลยีช่วยเหลือที่คล้ายคลึงกันใช้ประโยชน์จากแอตทริบิวต์นี้เพื่อให้ผู้ใช้มีทางลัดเพิ่มเติมเพื่อนำทางไปยังองค์ประกอบที่ยุบได้โดยตรง

โปรดทราบว่าการใช้งานปัจจุบันของ Bootstrap ไม่ได้ครอบคลุมการโต้ตอบของแป้นพิมพ์ทางเลือก ต่างๆ ที่อธิบายไว้ใน รูปแบบหีบเพลง ARIA Authoring Practices Guide - คุณจะต้องรวมสิ่งเหล่านี้ด้วย JavaScript ที่กำหนดเอง

ซาส

ตัวแปร

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

ชั้นเรียน

คลาสทรานซิชันการยุบสามารถพบได้scss/_transitions.scssเนื่องจากใช้ร่วมกันในหลายองค์ประกอบ (การยุบและหีบเพลง)

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

การใช้งาน

ปลั๊กอินยุบใช้คลาสสองสามคลาสเพื่อจัดการกับงานหนัก:

• .collapseซ่อนเนื้อหา
• .collapse.showแสดงเนื้อหา
• .collapsingถูกเพิ่มเมื่อการเปลี่ยนแปลงเริ่มต้น และลบออกเมื่อเสร็จสิ้น

คลาสเหล่านี้สามารถพบได้ใน_transitions.scss.

ผ่านแอตทริบิวต์ข้อมูล

เพียงเพิ่มdata-bs-toggle="collapse"และ a data-bs-targetให้กับองค์ประกอบเพื่อกำหนดการควบคุมองค์ประกอบที่ยุบได้หนึ่งองค์ประกอบขึ้นไปโดยอัตโนมัติ แอตทริบิวต์data-bs-targetยอมรับตัวเลือก CSS เพื่อปรับใช้การยุบ อย่าลืมเพิ่มคลาสcollapseลงในองค์ประกอบที่ยุบได้ หากคุณต้องการให้เปิดโดยค่าเริ่มต้น ให้เพิ่มคลาสshowเพิ่มเติม

หากต้องการเพิ่มการจัดการกลุ่มแบบหีบเพลงลงในพื้นที่ที่ยุบได้ ให้เพิ่มแอตทริบิวต์data-bs-parent="#selector"ข้อมูล อ้างอิงถึงหน้าหีบเพลงสำหรับข้อมูลเพิ่มเติม

ผ่านจาวาสคริปต์

เปิดใช้งานด้วยตนเองด้วย:

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

ตัวเลือก

เนื่องจากตัวเลือกสามารถส่งผ่านแอตทริบิวต์ข้อมูลหรือ JavaScript คุณจึงเพิ่มชื่อตัวเลือกต่อท้ายได้ เช่น เดียวdata-bs-กับใน data-bs-animation="{value}"ตรวจสอบให้แน่ใจว่าได้เปลี่ยนประเภทเคสของชื่อตัวเลือกจาก “ camelCase ” เป็น “ kebab-case ” เมื่อส่งตัวเลือกผ่านแอตทริบิวต์ data เช่น ใช้data-bs-custom-class="beautifier"แทนdata-bs-customClass="beautifier".

ใน Bootstrap 5.2.0 ส่วนประกอบทั้งหมดสนับสนุนแอตทริบิวต์ข้อมูลที่สงวนไว้สำหรับทดลองdata-bs-configซึ่งสามารถจัดเก็บการกำหนดค่าส่วนประกอบอย่างง่ายเป็นสตริง JSON เมื่อองค์ประกอบมีdata-bs-config='{"delay":0, "title":123}'และdata-bs-title="456"แอตทริบิวต์ ค่าสุดท้ายtitleจะเป็น456และแอตทริบิวต์ข้อมูลที่แยกจากกันจะแทนที่ค่าที่ให้ไว้data-bs-configใน นอกจากนี้ แอตทริบิวต์ข้อมูลที่มีอยู่ยังสามารถเก็บค่า JSON เช่นdata-bs-delay='{"show":0,"hide":150}'.

วิธีการ

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

คุณสามารถสร้างอินสแตนซ์การยุบด้วยตัวสร้าง เช่น

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

เหตุการณ์

Bootstrap’s collapse class exposes a few events for hooking into collapse functionality.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})