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

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

บรามุส

หีบเพลงชัก

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

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

การสาธิต: แอคคอร์เดียนที่มี HTML และ CSS

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

การสนับสนุนเบราว์เซอร์

  • 120
  • 120
  • x
  • 17.2

รูปแบบแอคคอร์เดียนประเภทหนึ่งคือแอคคอร์เดียนพิเศษ ซึ่งสามารถเปิดได้พร้อมกันเพียงชิ้นเดียว

ตอนนี้คุณเพิ่มแอตทริบิวต์ 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>
การสาธิต: แอคคอร์เดียนพิเศษโดยใช้ HTML และ CSS

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

การสาธิต: แอคคอร์เดียนพิเศษหลายรายการโดยใช้ HTML และ CSS

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

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

คุณสามารถใช้ 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 จะไม่เกิดผลอะไรเลย ในกรณีของการเพิ่มประสิทธิภาพแบบต่อเนื่อง นี่คือพฤติกรรมที่ยอมรับได้