สร้าง Accordion เฉพาะที่มีองค์ประกอบ name เดียวกัน
แอคคอร์เดียน
รูปแบบ UI ที่พบได้ทั่วไปบนเว็บคือคอมโพเนนต์แบบ Accordion องค์ประกอบนี้ประกอบด้วยวิดเจ็ตการเปิดเผยข้อมูลหลายรายการที่ขยาย (หรือยุบ) ทีละรายการเพื่อแสดง (หรือซ่อน) เนื้อหาได้
หากต้องการใช้รูปแบบนี้บนเว็บ คุณจะต้องรวมองค์ประกอบ
แอคคอร์เดียนสุดพิเศษ
Browser Support
รูปแบบของ Accordion อีกรูปแบบหนึ่งคือ Accordion แบบพิเศษ ซึ่งจะเปิดวิดเจ็ตการเปิดเผยได้เพียงรายการเดียวพร้อมกัน
หากต้องการสร้าง Accordion เฉพาะในเว็บ ให้เพิ่มแอตทริบิวต์ name ลงในองค์ประกอบ name เดียวกันจะจัดกลุ่มตามความหมายและจะทํางานแบบ Accordion ที่ไม่ซ้ำกัน เมื่อคุณเปิดองค์ประกอบ
Welcome to Learn CSS!
…
Box Model
…
Selectors
…
หน้าเว็บหนึ่งๆ อาจมี Accordion ที่ไม่ซ้ำกันหลายรายการ เมื่อใดก็ตามที่คุณใช้ค่า name ใหม่ในองค์ประกอบ
องค์ประกอบ name จะเป็นตัวจัดกลุ่ม ไม่ใช่ลําดับ DOM
แสดงโฆษณาแบบพุลฟิลสำหรับแอคคอร์เดียนเฉพาะ
JavaScript ต่อไปนี้ช่วยให้คุณโพลีฟีลลักษณะการทํางานของ Accordion แบบพิเศษได้ โค้ดใช้เหตุการณ์ toggle ขององค์ประกอบ
เมื่อองค์ประกอบ name เปิดขึ้น โค้ดจะค้นหาองค์ประกอบ name เดียวกันและปิดองค์ประกอบเหล่านั้น
document.querySelectorAll("details[name]").forEach(($details) => {
$details.addEventListener("toggle", (e) => {
const name = $details.getAttribute("name");
if (e.newState == "open") {
document
.querySelectorAll(`details[name=${name}][open]`)
.forEach(($openDetails) => {
if (!($openDetails === $details)) {
$openDetails.removeAttribute("open");
}
});
}
});
});
เบราว์เซอร์บางเวอร์ชันเก่าจะไม่เรียกเหตุการณ์ toggle นี้ ในเบราว์เซอร์เหล่านั้น โค้ด polyfill จะไม่ทํางาน ในแง่ของการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอน ลักษณะการทำงานนี้เป็นสิ่งที่ยอมรับได้