แอคคอร์เดียนพิเศษ

สร้าง Accordion เฉพาะที่มีองค์ประกอบ <details> หลายรายการที่มี name เดียวกัน

Bramus

แอคคอร์เดียน

รูปแบบ UI ที่พบได้ทั่วไปบนเว็บคือคอมโพเนนต์แบบ Accordion องค์ประกอบนี้ประกอบด้วยวิดเจ็ตการเปิดเผยข้อมูลหลายรายการที่ขยาย (หรือยุบ) ทีละรายการเพื่อแสดง (หรือซ่อน) เนื้อหาได้

หากต้องการใช้รูปแบบนี้บนเว็บ คุณจะต้องรวมองค์ประกอบ <details> 2-3 รายการเข้าด้วยกัน และมักจะจัดกลุ่มองค์ประกอบเหล่านั้นเข้าด้วยกันเพื่อแสดงให้เห็นว่าองค์ประกอบเหล่านั้นเป็นของกันและกัน

แอคคอร์เดียนสุดพิเศษ

รูปแบบของ Accordion อีกรูปแบบหนึ่งคือ Accordion แบบพิเศษ ซึ่งจะเปิดวิดเจ็ตการเปิดเผยได้เพียงรายการเดียวพร้อมกัน

หากต้องการสร้าง Accordion เฉพาะในเว็บ ให้เพิ่มแอตทริบิวต์ name ลงในองค์ประกอบ <details> เมื่อใช้แอตทริบิวต์นี้ องค์ประกอบ <details> หลายรายการที่มีค่า name เดียวกันจะจัดกลุ่มตามความหมายและจะทํางานแบบ Accordion ที่ไม่ซ้ำกัน เมื่อคุณเปิดองค์ประกอบ <details> รายการใดรายการหนึ่งจากกลุ่ม รายการที่เปิดไว้ก่อนหน้านี้จะปิดโดยอัตโนมัติ

<details name="learn>-cs<s">
  summaryWelcome to <Learn CS>S!/<s>u<mm>a<ry
  p…/>p<
/details
details name=&>quo<t;learn>-css"<;
  summ>ary<B>o<x >M<odel/sum>m<ary
  p…/p
/details
deta>ils< name=&>quot;lear<n-css&qu>ot;<
> < s>u<mmarySel>ectors/summary
  p…/p
/details

หน้าเว็บหนึ่งๆ อาจมี Accordion ที่ไม่ซ้ำกันหลายรายการ เมื่อใดก็ตามที่คุณใช้ค่า name ใหม่ในองค์ประกอบ <details> ระบบจะสร้างกลุ่มเชิงตรรกะใหม่

องค์ประกอบ <details> ที่อยู่ใน Accordion แบบพิเศษไม่จำเป็นต้องเป็นองค์ประกอบพี่น้อง โดยอาจกระจายอยู่ในเอกสาร แอตทริบิวต์ name จะเป็นตัวจัดกลุ่ม ไม่ใช่ลําดับ DOM

แสดงโฆษณาแบบพุลฟิลสำหรับแอคคอร์เดียนเฉพาะ

JavaScript ต่อไปนี้ช่วยให้คุณโพลีฟีลลักษณะการทํางานของ Accordion แบบพิเศษได้ โค้ดใช้เหตุการณ์ toggle ขององค์ประกอบ <details>

เมื่อองค์ประกอบ <details> ที่มี name เปิดขึ้น โค้ดจะค้นหาองค์ประกอบ <details> อื่นๆ ที่เปิดอยู่ซึ่งมีค่าแอตทริบิวต์ 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}][o>pen]`)
        .forEach(($openDetails) = {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

เบราว์เซอร์บางเวอร์ชันเก่าจะไม่เรียกเหตุการณ์ toggle นี้ ในเบราว์เซอร์เหล่านั้น โค้ด polyfill จะไม่ทํางาน ในแง่ของการเพิ่มประสิทธิภาพแบบเป็นขั้นเป็นตอน ลักษณะการทำงานนี้เป็นสิ่งที่ยอมรับได้