HTML Academy · บทเรียน

การสร้างแอคคอร์เดียนแบบ PE

สร้างแอคคอร์เดียนที่ทำงานได้โดยไม่ใช้ JavaScript แล้วเพิ่มประสิทธิภาพให้ภายหลัง

บทเรียน 4 จาก 413 ขั้นตอน

การสร้างแอคคอร์เดียนแบบ PE เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เป้าหมาย: แอคคอร์เดียนที่ใช้งานได้โดยไม่ใช้ JS

แอคคอร์เดียนเวอร์ชัน PE ใช้ HTML เพียงอย่างเดียว นั่นคือคู่ขององค์ประกอบ <details>/<summary> ที่มีมาในตัว คลิก summary เพื่อสลับการเปิดปิดแผง ทำงานได้โดยไม่มี CSS ไม่มี JS และไม่มีเฟรมเวิร์ก เพราะสร้างมาใน HTML

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the markup language of the web.</p>
</details>

การเข้าถึงที่มีมาในตัว

<summary> เป็นปุ่มที่โฟกัสได้และเปิดใช้งานด้วยแป้นพิมพ์ (กด Enter/Space เพื่อสลับสถานะ) โปรแกรมอ่านหน้าจอจะประกาศสถานะว่าขยายหรือยุบอยู่ องค์ประกอบ HTML สองรายการนี้ให้ความสามารถเดียวกับที่แอ็กคอร์เดียนแบบกำหนดเองของรีแอ็กต์อาจต้องใช้ ARIA และการจัดการเหตุการณ์หลายสิบบรรทัดจึงจะทำได้

การซ้อนเลเยอร์ด้วย CSS

จัดรูปแบบสามเหลี่ยมแสดงหรือซ่อน ระยะห่างภายในแผง และการเปลี่ยนผ่านด้วย CSS ปกติ แอตทริบิวต์ open สะท้อนสถานะ ดังนั้น details[open] summary { color: blue; } จึงมีผลเฉพาะเมื่อแผงถูกขยาย ไม่จำเป็นต้องใช้ JS เพื่อปรับแต่งรูปลักษณ์

details { border-bottom: 1px solid #ccc; padding: 8px 0; }
summary { font-weight: bold; cursor: pointer; }
details[open] summary { color: var(--accent); }

การทำให้การเปิดและปิดเคลื่อนไหว

การเปิดและปิดตามค่าเริ่มต้นเกิดขึ้นทันที คุณสามารถทำให้เคลื่อนไหวได้โดยเปลี่ยนผ่าน content-visibility หรือใช้ JS วัดความสูงของแผงแล้วทำให้ max-height เคลื่อนไหว สำหรับกรณีง่าย ๆ การสลับแบบฉับพลันถือว่ายอมรับได้ ส่วนภาพเคลื่อนไหวเป็นการปรับปรุงด้วย CSS+JS ที่เพิ่มเข้ามาเป็นลำดับ

การเพิ่มความสามารถด้วย JavaScript

JS สามารถเพิ่มความสามารถเสริมที่มีประโยชน์ได้ เช่น ปิดแอ็กคอร์เดียนอื่นเมื่อรายการหนึ่งเปิดขึ้น (โหมดเปิดรายการเดียว) จดจำสถานะที่เปิดไว้ใน localStorage ทำให้การเปลี่ยนผ่านเคลื่อนไหว หรือเก็บข้อมูลวิเคราะห์ว่ารายการใดถูกขยาย แต่ละความสามารถเป็นการเพิ่มแบบไม่กระทบพื้นฐานเดิม

document.querySelectorAll("details").forEach((d) => {
  d.addEventListener("toggle", () => {
    if (d.open) {
      document.querySelectorAll("details").forEach((o) => {
        if (o !== d) o.removeAttribute("open");
      });
    }
  });
});

เหตุการณ์สลับสถานะ

<details> จะส่งเหตุการณ์ toggle ทุกครั้งที่สถานะ open เปลี่ยนแปลง ใช้เหตุการณ์นี้เพื่อตอบสนองต่อการขยายโดยผู้ใช้ โดยไม่ต้องเชื่อมตัวจัดการการคลิกใหม่ รองรับทั้งการคลิกเมาส์และการเปิดใช้งานด้วยแป้นพิมพ์

การแสดงผลสถานะฝั่งเซิร์ฟเวอร์

หากต้องการแสดงแอ็กคอร์เดียนที่เปิดอยู่ตั้งแต่แรก ให้กำหนดแอตทริบิวต์ open ที่ฝั่งเซิร์ฟเวอร์: <details open> สถานะจะอยู่ใน HTML ทำให้โปรแกรมรวบรวมข้อมูลและผู้ใช้ที่มีการเชื่อมต่อช้ามองเห็นได้ก่อนที่ JS จะทำงาน

เมื่อความสามารถในตัวไม่เพียงพอ

หากการออกแบบต้องใช้ไอคอนขยายหรือยุบแบบกำหนดเอง การแสดงผลแบบเคลื่อนไหว หรือแผงหลายคอลัมน์ ให้สร้างเวอร์ชันแบบกำหนดเองได้ แต่ควรใช้ <details>/<summary> เป็นโครงสร้างพื้นฐานหากเป็นไปได้ เพิ่ม ARIA เฉพาะเมื่อไม่สามารถใช้องค์ประกอบเนทีฟได้เลย

การตรวจสอบโดยไม่ใช้ JS

ปิดใช้งาน JavaScript ใน DevTools แล้วตรวจสอบว่าแอ็กคอร์เดียนยังทำงานได้: คลิก summary แผงต้องสลับสถานะ ลำดับโฟกัสยังคงเป็นเหตุเป็นผล และแป้นพิมพ์ยังเปิดใช้งานได้ หากมีสิ่งใดเสียหาย JS ก็ไม่ใช่การปรับปรุงเพิ่มเติม แต่เป็นข้อกำหนด ซึ่งขัดต่อ PE

การเปิดรายการเดียวด้วย CSS เท่านั้น

หากต้องการให้ "เปิดได้ครั้งละรายการเดียว" แบบปุ่มตัวเลือกโดยไม่ใช้ JS ให้ใช้แอตทริบิวต์ name กับ <details> (รองรับในโครม/ซาฟารี): <details name="faq"> ทั้งหมดจะใช้สถานะร่วมกัน ดังนั้นเมื่อเปิดรายการหนึ่ง รายการอื่นจะปิดลง รูปแบบ HTML ล้วนที่ทำงานคล้ายปุ่มตัวเลือก

การย้ายจากแอ็กคอร์เดียนที่ใช้ JS เท่านั้น

แทนที่ divs+JS ด้วย <details>/<summary> และคงคลาส CSS ไว้สำหรับการจัดรูปแบบ ผลลัพธ์คือ HTML ที่สั้นลง ไม่ต้องพึ่งพา JS การเข้าถึงที่ดีขึ้น และเนื้อหาที่เครื่องมือค้นหาจัดทำดัชนีได้ แอ็กคอร์เดียนที่ใช้ JS ส่วนใหญ่สามารถย้ายมาใช้ PE ได้โดยแทบไม่เปลี่ยนแปลงสิ่งที่ผู้ใช้มองเห็น

ตรวจสอบความรู้

องค์ประกอบ HTML คู่ใดให้แอ็กคอร์เดียนที่ทำงานได้อย่างสมบูรณ์โดยไม่ใช้ JavaScript เลย

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

แอ็กคอร์เดียนแบบ PE ใช้ <details>/<summary> เนทีฟเป็นพื้นฐาน จึงเข้าถึงได้อย่างสมบูรณ์และควบคุมด้วยแป้นพิมพ์ได้โดยไม่ใช้ JS สามารถใช้ CSS เพิ่มการจัดรูปแบบ และใช้ JS เพิ่มภาพเคลื่อนไหวหรือพฤติกรรมเปิดรายการเดียวได้ตามต้องการ ตรวจสอบโดยปิดใช้งาน JS ว่าพื้นฐานยังทำงานได้ แอตทริบิวต์ name แบบใหม่นี้ยังเปิดใช้โหมดเปิดรายการเดียวด้วย CSS เท่านั้นได้อีกด้วย

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 40
บทเรียน: 159

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การสร้างแอคคอร์เดียนแบบ PE” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างแอคคอร์เดียนแบบ PE” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างแอคคอร์เดียนแบบ PE”

สร้างแอคคอร์เดียนที่ทำงานได้โดยไม่ใช้ JavaScript แล้วเพิ่มประสิทธิภาพให้ภายหลัง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การสร้างแอคคอร์เดียนแบบ PE” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

ปรัชญา PE: เริ่มต้นด้วย HTML
การตรวจจับฟีเจอร์เทียบกับการตรวจสอบเบราว์เซอร์
Graceful Degradation เทียบกับ Progressive Enhancement
การสร้างแอคคอร์เดียนแบบ PE

← กลับไปที่ HTML Academy