เมนูเลื่อนที่เกี่ยวกับ jQuery Mobile

เนื้อหาที่สามารถย่อยออกมาได้

Collapsibles อนุญาตให้คุณซ่อนหรือแสดงเนื้อหา - มีประโยชน์มากสำหรับเก็บข้อมูลบางส่วน

ถ้าคุณต้องการที่จะสร้างบล็อคเนื้อหาที่สามารถย่อยออกมาได้ ให้จัดสรรคุณสมบัติ data-role="collapsible" ให้กับตัวแทน (div) ในละแวกนี้ แล้วเพิ่มองค์ประกอบหัวข้อ (h1-h6) หลังจากนั้นเพิ่มทาง HTML ที่คุณต้องการขยาย:

ตัวอย่าง

<div data-role="collapsible">
  <h1>คลิกฉัน - ฉันสามารถย่อยออกมาได้!</h1>
  <p>ฉันคือเนื้อหาที่สามารถย่อยออกมาได้</p>
</div>

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

โดยเริ่มต้น สิ่งที่ถูกขยายนี้จะปิด ถ้าคุณต้องการที่จะขยายเมื่อหน้าเว็บจะโหลด ใช้ data-collapsed="false":

ตัวอย่าง

<div data-role="collapsible" data-collapsed="false">
  <h1>คลิกฉัน - ฉันสามารถย่อยออกมาได้!</h1>
  <p>ตอนนี้ฉันถูกเปิดโดยเริ่มต้น</p>
</div>

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

บล็อคที่สามารถย่อยออกมาได้ที่ถูกทับซ้อน

สามารถทับซ้อนบล็อคเนื้อหาที่สามารถย่อยออกมาได้ได้

ตัวอย่าง

<div data-role="collapsible">
  <h1>คลิกฉัน - ฉันสามารถย่อยออกมาได้!</h1>
  <p>ฉันคือสิ่งที่ถูกขยายของเนื้อหา</p>
  <div data-role="collapsible">
    <h1>คลิกฉัน - ฉันคือบล็อคที่สามารถย่อยออกมาได้ที่ถูกทับซ้อน!</h1>
    <p>ฉันคือสิ่งที่ถูกขยายของบล็อคที่สามารถย่อยออกมาได้ที่ถูกทับซ้อน</p>
  </div>
</div>

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

คำเตือน：บล็อคเนื้อหาที่สามารถย่อยออกมาได้สามารถถูกทับซ้อนกันได้ทุกครั้งที่คุณต้องการ

สมุนไพรที่สามารถย่อยออกมาได้

สมุนไพรที่สามารถย่อยออกมาได้ (ที่มักเรียกว่าแฟน) คือบล็อคที่ถูกประกอบกันด้วยกัน ขณะที่บล็อคใหม่ถูกเปิด บล็อคทั้งหมดอื่นจะปิด

สร้างบล็อคเนื้อหาหลายชิ้น แล้วบรรจุบล็อคที่สามารถย่อยออกมาได้ด้วย data-role="collapsible-set" ในตัวแทนใหม่:

ตัวอย่าง

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h1>คลิกฉัน - ฉันสามารถย่อยออกมาได้!</h1>
    <p>ฉันคือสิ่งที่ถูกขยายของเนื้อหา</p>
  </div>
  <div data-role="collapsible">
    <h1>คลิกฉัน - ฉันสามารถย่อยออกมาได้!</h1>
    <p>ฉันคือสิ่งที่ถูกขยายของเนื้อหา</p>
  </div>
</div>

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

ตัวอย่างเพิ่มเติม

ลบมุมโดยใช้属性 data-inset
วิธีทำให้ collapsibles หายไปทุกๆมุม
ลดขนาด collapsibles ด้วย data-mini
วิธีทำให้ collapsibles ลดขนาดเล็กลง
เปลี่ยนไอคอนด้วย data-collapsed-icon และ data-expanded-icon
วิธีเปลี่ยนไอคอนของ collapsibles (โดยเริ่มต้นคือ + และ -)