รายละเอียดและข้อมูลสรุป

สำรวจวิธีการทำงานของรายละเอียดและองค์ประกอบสรุปที่มีประโยชน์อย่างยิ่ง รวมถึงที่ที่จะใช้งาน

วิดเจ็ตการเปิดเผยเป็นตัวควบคุมอินเทอร์เฟซผู้ใช้ที่ซ่อนและแสดงเนื้อหา หากคุณอ่านข้อความนี้ใน web.dev และวิวพอร์ตมีความกว้างน้อยกว่า 106 em เมื่อคลิกที่ "ในหน้านี้" เหนือย่อหน้านี้ คุณจะเห็นสารบัญของส่วนนี้ หากไม่เห็นตัวเลือกนี้ ให้ย่อเบราว์เซอร์เพื่อดูการนำทางสารบัญในหน้านี้ในรูปแบบวิดเจ็ตการเปิดเผย

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

jQuery ได้รวมรูปแบบ UI แอคคอร์เดียนมาตั้งแต่ปี 2009 เป็นอย่างน้อย เดิมโซลูชันแอคคอร์เดียนที่ไม่มี JavaScript คือการทำให้คําถามที่พบบ่อยแต่ละข้อเปลี่ยนเป็น <label> ตามด้วยเครื่องหมายถูกที่ติดป้ายกำกับไว้ จากนั้นแสดงคำตอบ <div> เมื่อเครื่องหมายถูก CSS จะมีลักษณะดังนี้

#FAQ [type="checkbox"] + div.answer {
  /* all the answer styles */
  display: none;
}
#FAQ [type="checkbox"]:checked + div.answer {
  display: block;
}

ทำไมจึงเป็นประวัติศาสตร์ วิดเจ็ตการเปิดเผย เช่น แอคคอร์เดียน ที่ไม่มีการแฮ็กหรือการแฮ็กการควบคุมแบบฟอร์มเป็นส่วนเสริมที่เพิ่งเกิดขึ้นเมื่อเร็วๆ นี้ โดยองค์ประกอบ <details> และ <summary> ได้รับการรองรับอย่างเต็มรูปแบบในเบราว์เซอร์รุ่นใหม่ทั้งหมดเท่านั้นนับตั้งแต่เดือนมกราคม 2020 ตอนนี้คุณสามารถสร้างวิดเจ็ตการเปิดเผยที่ใช้งานได้และน่าสนใจน้อยกว่าวิดเจ็ตการเปิดเผยข้อมูลโดยใช้เพียง HTML เชิงความหมาย เพียงคุณต้องมีองค์ประกอบ <details> และ <summary> ซึ่งเป็นวิธีที่มีมาในตัวในการจัดการกับการขยายและยุบเนื้อหา เมื่อผู้ใช้คลิกหรือแตะ <summary> หรือปล่อยแป้น Enter เมื่อ <summary> มีโฟกัส เนื้อหาของ <details> ระดับบนสุดจะสลับเป็น "แสดง"

คุณสามารถค่อยๆ ปรับปรุงฟีเจอร์และรูปลักษณ์เริ่มต้นได้เช่นเดียวกับเนื้อหาเชิงความหมายทั้งหมด ในกรณีนี้ คุณก็จะเพิ่ม CSS ไปได้เล็กน้อย แต่ไม่มีอะไรเพิ่มเติม

โค้ดปากกาเหล่านี้ไม่มี JavaScript

สลับระดับการเข้าถึง: แอตทริบิวต์ open

องค์ประกอบ <details> คือคอนเทนเนอร์วิดเจ็ตการเปิดเผยข้อมูล <summary> คือข้อมูลสรุปหรือคำอธิบายสำหรับ <details> ระดับบน ข้อมูลสรุปจะปรากฏขึ้นเสมอ โดยจะทำหน้าที่เป็นปุ่มที่สลับการแสดงเนื้อหาที่เหลือของผู้ปกครอง การโต้ตอบกับ <summary> จะสลับการแสดงรายการพี่น้องสรุปที่ติดป้ายกำกับด้วยตนเองโดยการสลับแอตทริบิวต์ open ขององค์ประกอบ <details>

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

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

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

เนื้อหาที่ซ่อนในสถานะยุบจะค้นหาได้ในบางเบราว์เซอร์แต่ไม่ค้นหาได้ แม้ว่าเนื้อหาที่ยุบจะไม่ได้เป็นส่วนหนึ่งของ DOM ก็ตาม หากคุณค้นหาใน Edge หรือ Chrome รายละเอียดที่มีข้อความค้นหาจะขยายเพื่อแสดงรายการดังกล่าว ระบบจะไม่จำลองลักษณะการทำงานนี้ใน Firefox หรือ Safari

<summary> ต้องเป็นรายการย่อยแรกขององค์ประกอบ <details> ซึ่งแสดงถึงสรุป คำบรรยาย หรือคำอธิบายสำหรับเนื้อหาที่เหลือขององค์ประกอบ <details> ระดับบนสุดที่ฝังอยู่ เนื้อหาขององค์ประกอบ <summary> อาจเป็นเนื้อหาส่วนหัว ข้อความธรรมดา หรือ HTML ใดก็ได้ที่ใช้ภายในย่อหน้าได้

สลับเครื่องหมายสรุป

ใน Codepens ทั้ง 2 ตัวก่อนหน้านี้ คุณจะเห็นลูกศรที่ด้าน inline-start ของสรุป วิดเจ็ตการเปิดเผยข้อมูลมักปรากฏบนหน้าจอโดยใช้สามเหลี่ยมเล็กๆ ที่หมุน (หรือบิด) เพื่อระบุสถานะเปิด/ปิด พร้อมกับป้ายกำกับที่ด้านข้างสามเหลี่ยม เนื้อหาขององค์ประกอบ <summary> ติดป้ายกำกับวิดเจ็ตการเปิดเผยข้อมูล ลูกศรหมุนที่ด้านบนของแต่ละส่วนคือ ::marker ที่ตั้งค่าไว้ในองค์ประกอบ <summary> องค์ประกอบ <summary> รองรับพร็อพเพอร์ตี้แบบสั้นและพร็อพเพอร์ตี้แบบยาวของ list-style รวมถึง list-style-type เช่นเดียวกับรายการย่อย คุณจัดรูปแบบสามเหลี่ยมเปิดเผยข้อมูลด้วย CSS ได้ ซึ่งรวมถึงการเปลี่ยนเครื่องหมายที่ใช้จากสามเหลี่ยมเป็นสัญลักษณ์หัวข้อย่อยประเภทอื่นๆ ซึ่งรวมถึงรูปภาพที่มี list-style-image

หากต้องการใช้รูปแบบอื่นๆ ให้ใช้ตัวเลือกที่คล้ายกับ details summary::marker องค์ประกอบ Pseudo ::marker รองรับรูปแบบที่จำกัดเท่านั้น การนำ ::marker ออกและแทนที่ด้วย ::before ที่ใช้งานง่ายขึ้นเป็นแนวทางปฏิบัติทั่วไป โดยรูปแบบ CSS จะเปลี่ยนรูปแบบของเนื้อหาที่สร้างขึ้นเล็กน้อยตามการมี (หรือไม่มี) ของแอตทริบิวต์แบบเปิด คุณนำไอคอนวิดเจ็ตการเปิดเผยออกได้โดยตั้งค่า list-style: none หรือตั้งค่าเนื้อหาของเครื่องหมายเป็น none แต่ใส่ตัวบ่งชี้ที่เป็นภาพเพื่อแจ้งให้ผู้ที่มองเห็นได้ทราบว่าเนื้อหาสรุปเป็นปุ่มเปิด/ปิดที่จะแสดงหรือซ่อนเนื้อหาเมื่อเปิดใช้งานเสมอ

details summary::before {
  /* all the styles */
}
details[open] summary::before {
  /* changes applied when open only */
}

ตัวอย่างนี้นำเครื่องหมายเริ่มต้นออก และเพิ่มเนื้อหาที่สร้างขึ้นเพื่อสร้าง + เมื่อปิดรายละเอียดและ - เมื่อรายละเอียดเปิดอยู่

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

วิธีจัดการข้อผิดพลาด

หากคุณไม่ใส่ <summary> เบราว์เซอร์จะสร้างให้คุณ พร้อมด้วยเครื่องหมายและคำว่า "รายละเอียด" สรุปนี้เป็นส่วนหนึ่งของรากเงา ดังนั้นจะไม่มีการใช้รูปแบบสรุป CSS ของผู้เขียน ขออภัย Safari ไม่รวมรายละเอียดในลำดับโฟกัสของแป้นพิมพ์

หากคุณใส่ <summary> แต่ไม่ได้เป็นองค์ประกอบแรกใน <details> เบราว์เซอร์จะยังคงแสดงสรุปตามที่ควรจะเป็น ก็จะไม่ล้มเหลวเช่นกันหากคุณใส่ลิงก์ ป้ายกำกับ หรือองค์ประกอบแบบอินเทอร์แอกทีฟอื่นๆ ภายในสรุป แต่เบราว์เซอร์จัดการกับเนื้อหาแบบอินเทอร์แอกทีฟภายในเนื้อหาแบบอินเทอร์แอกทีฟแตกต่างกัน เช่น หากคุณใส่ลิงก์ไว้ในข้อมูลสรุป บางเบราว์เซอร์จะเพิ่มทั้งข้อมูลสรุปและลิงก์ไปยังลำดับแท็บเริ่มต้น แต่เบราว์เซอร์อื่นๆ จะไม่โฟกัสที่ลิงก์โดยค่าเริ่มต้น หากคุณคลิก <label> ที่ฝังอยู่ใน <summary> บางเบราว์เซอร์จะให้โฟกัสกับส่วนควบคุมแบบฟอร์มที่เชื่อมโยง ส่วนเบราว์เซอร์อื่นๆ จะโฟกัสไปที่ตัวควบคุมแบบฟอร์มและสลับ <details> เป็นเปิดหรือปิด

อินเทอร์เฟซ HTMLDetailsElement

HTMLDetailsElement จะรับพร็อพเพอร์ตี้ เมธอด และเหตุการณ์ทั้งหมดจาก HTMLElement รวมถึงเพิ่มพร็อพเพอร์ตี้อินสแตนซ์ open และเหตุการณ์ toggle เช่นเดียวกับองค์ประกอบ HTML ทั้งหมด พร็อพเพอร์ตี้ HTMLDetailsElement.open เป็นค่าบูลีนที่แสดงแอตทริบิวต์ HTML open ซึ่งบ่งบอกว่าเนื้อหาขององค์ประกอบ (ไม่นับ <summary>) แสดงต่อผู้ใช้หรือไม่ เหตุการณ์การสลับจะเริ่มทำงานเมื่อองค์ประกอบ <details> เปิดหรือปิดอยู่ คุณฟังกิจกรรมนี้ได้โดยใช้ addEventListener()

หากต้องการเขียนสคริปต์เพื่อปิดรายละเอียดที่เปิดอยู่เมื่อผู้ใช้เปิดรายละเอียดอื่นๆ ให้นำแอตทริบิวต์ที่เปิดอยู่ออกโดยใช้ removeAttribute("open") โดยทำดังนี้

นี่เป็นเพียงตัวอย่างเดียวในการใช้ JavaScript คุณอาจไม่จำเป็นต้องใช้ JavaScript ยกเว้นแต่เพียงฟังก์ชันปิดวิดเจ็ตการเปิดเผยที่เปิดอยู่อื่นๆ เท่านั้น

โปรดอย่าลืมว่า <details> และ <summary> เป็นสไตล์ที่ตอบโจทย์ได้มาก รวมถึงยังใช้เพื่อสร้างเคล็ดลับในการใช้เครื่องมือได้อีกด้วย แต่หากคุณจะใช้องค์ประกอบเชิงความหมายเหล่านี้สำหรับ Use Case ที่ความหมายเดิมไม่ตรงกัน โปรดตรวจสอบให้แน่ใจว่าคุณคงการช่วยเหลือพิเศษไว้เสมอ โดยส่วนใหญ่แล้ว HTML จะสามารถเข้าถึงได้โดยค่าเริ่มต้น หน้าที่ของเราในฐานะนักพัฒนาซอฟต์แวร์คือการทำให้เนื้อหาของเราเข้าถึงได้อยู่เสมอ

ทดสอบความเข้าใจ

ทดสอบความรู้ของคุณเกี่ยวกับรายละเอียดและข้อมูลสรุป

<summary> ต้องเป็นรายการย่อยแรกขององค์ประกอบใด

<p>

โปรดลองอีกครั้ง

<details>

ถูกต้องแล้ว!

<fieldset>

โปรดลองอีกครั้ง