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

สร้างแอคคอร์เดียนพิเศษที่มีองค์ประกอบ <details> หลายรายการที่มี name เหมือนกัน

Bramus

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

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

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

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

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

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

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

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

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

โพลีฟิวส์หีบเพลงสุดพิเศษ

ด้วย JavaScript ต่อไปนี้ เป็นไปได้ที่จะเป็นการโพลีฟิลพฤติกรรมของแอคคอร์เดียนพิเศษ โค้ดดังกล่าวอาศัยเหตุการณ์ 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}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});

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