Bootstrap 5 ฝั่งหลัง

基础的折叠

当您想要隐藏和显示大量内容时，可折叠组件非常有用：

ตัวอย่าง

<button data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse">
  <p>ในวันแห่งแสงและอากาศดี หายใจดิบดิมในแม่น้ำซาซี่ ทั้งที่สวยงามและสวยงามในตอนนี้</p>
  <p>เล็กน้อยก็รู้เด็ดขาดลมในทางด้านตะวันออก หลายหลายสีและสีเข้มมากกว่าในฤดูใบไม้ผลิ</p>
</div>

ทดลองด้วยตัวเอง

例子解释

.collapse 类指示可折叠元素（在我们的例子中为 <div>）；通过单击按钮，可显示或隐藏的内容。

如需控制（显示/隐藏）可折叠内容，请将 data-bs-toggle="collapse" 属性添加到 <a> 或 <button> 元素。然后添加 data-bs-target="#id" 属性来连接按钮和可折叠内容（<div id="demo">）。

注释：对于 <a> 元素，您可以使用 href 属性代替 data-bs-target 属性：

ตัวอย่าง

<a href="#demo" data-bs-toggle="collapse">春日</a>
<div id="demo" class="collapse">
  <p>ในวันแห่งแสงและอากาศดี หายใจดิบดิมในแม่น้ำซาซี่ ทั้งที่สวยงามและสวยงามในตอนนี้</p>
  <p>เล็กน้อยก็รู้เด็ดขาดลมในทางด้านตะวันออก หลายหลายสีและสีเข้มมากกว่าในฤดูใบไม้ผลิ</p>
</div>

ทดลองด้วยตัวเอง

默认情况下，可折叠内容是隐藏的。但是，您可以添加 .show 类来默认显示内容：

ตัวอย่าง

<div id="demo" class="collapse show">
  <p>ในวันแห่งแสงและอากาศดี หายใจดิบดิมในแม่น้ำซาซี่ ทั้งที่สวยงามและสวยงามในตอนนี้</p>
  <p>เล็กน้อยก็รู้เด็ดขาดลมในทางด้านตะวันออก หลายหลายสีและสีเข้มมากกว่าในฤดูใบไม้ผลิ</p>
</div>

ทดลองด้วยตัวเอง

Accordion（手风琴）

下例通过对 card 组件进行扩展，显示一个简单的手风琴。

注释：使用 data-bs-parent ขอบเขตความสามารถให้ปิดองค์การเลื่อนตัวทั้งหมดภายใต้เจ้าของรายการที่กำหนดเมื่อมีการแสดงองค์การเลื่อนตัวหนึ่ง

ตัวอย่าง

<div id="accordion">
  <div class="card">
    <div class="card-header">
      <a class="btn" data-bs-toggle="collapse" href="#collapseOne">
        โครงการเลื่อนตัวกลุ่ม #1
      </a>
    </div>
    <div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>วันใบไม้ผลิ</h3>
        <p>ในวันแห่งแสงและอากาศดี หายใจดิบดิมในแม่น้ำซาซี่ ทั้งที่สวยงามและสวยงามในตอนนี้</p>
        <p>เล็กน้อยก็รู้เด็ดขาดลมในทางด้านตะวันออก หลายหลายสีและสีเข้มมากกว่าในฤดูใบไม้ผลิ</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
        โครงการเลื่อนตัวกลุ่ม #2
      </a>
    </div>
    <div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>บทกลุ่มในฤดูร้อน</h3>
        <p>หน้าแดงและสีม่วงแล้วเป็นเถ้า ตอนเสียงนกหวีดนกแก้ว ฤดูร้อนก็เริ่มเปิดตัว</p>
        <p>เดินเดินข้างทางไม้เก้าเหล่า ไม่ทันทางจึงรู้ว่าฉันเป็นมนุษย์ชาติในยุคสงบ</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">
      <a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
        โครงการเลื่อนตัวกลุ่ม #3
      </a>
    </div>
    <div id="collapseThree" class="collapse" data-bs-parent="#accordion">
      <div class="card-body">
        <h3>การเดินทางขึ้นเขา</h3>
        <p>ไปข้างหน้าหมู่เขาเย็น พุ่งทางหินหันไปข้างหลัง บนที่สูงมีบ้านในท้องฝูง</p>
        <p>เข้ารถหยุดนอนในเวลาเย็น กำแหงเขียวสีเหลืองมากกว่าดอกดองในเดือนกุมภาพันธ์</p>
      </div>
    </div>
  </div>
</div>

ทดลองด้วยตัวเอง