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

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

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

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

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;
}

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

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

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

สลับการแสดงผล: แอตทริบิวต์ open

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

แอตทริบิวต์ 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 ที่ใช้ได้ภายในย่อหน้า

สลับตัวทำเครื่องหมายข้อมูลสรุป

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

หากต้องการใช้รูปแบบอื่นๆ ให้ใช้ตัวเลือกที่คล้ายกับ details summary::marker ::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

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

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

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

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้ด้านรายละเอียดและข้อมูลสรุป