Source

ทรุด

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

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

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

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

ตัวอย่าง

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

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

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

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</div>

ตัวอย่างหีบเพลง

คุณสามารถ ใช้ ส่วนประกอบ การ์ดเพื่อขยายลักษณะการยุบเริ่มต้นเพื่อสร้างหีบเพลงได้ เพื่อให้ได้สไตล์หีบเพลงอย่างถูกต้องต้องแน่ใจว่าใช้.accordionเป็นเสื้อคลุม

Anim pariatur cliche reprehenderit, enim eiusmod high life อัลบัมมัสเทอร์รี่ริชาร์ดสันโฆษณาปลาหมึก 3 wolf moon officia aute, non cupidat สเก็ตบอร์ด dolor บรันช์ รถบรรทุกอาหาร quinoa nesciunt laborum eiusmod. บรันช์ 3 หมาป่า มูน เทมพอร์ ซันท์ อะลิควา วางนกบนนั้น ปลาหมึก กาแฟต้นกำเนิดเดียว Nihil anim keffiyeh helvetica, เบียร์ฝีมือแรงงาน wes anderson cred nesciunt sapiente ea proident โฆษณา วีแกน ยกเว้น คนขายเนื้อ รอง lomo เลกกิ้ง occaecat คราฟท์เบียร์จากฟาร์มสู่โต๊ะ, ยีนส์สังเคราะห์ความงามแบบดิบๆ ที่คุณอาจไม่เคยได้ยินมาก่อนเกี่ยวกับการใช้ VHS ที่ยั่งยืน

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link 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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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 ไม่ครอบคลุมการโต้ตอบคีย์บอร์ดต่างๆ ที่อธิบายไว้ในรูปแบบหีบเพลง WAI-ARIA Authoring Practices 1.1คุณจะต้องรวมสิ่งเหล่านี้ด้วย 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...
})