ค้นพบวิธีการทำงานของรายละเอียดที่มีประโยชน์และองค์ประกอบสรุป รวมถึงที่ที่จะ ให้ใช้
วิดเจ็ตการเปิดเผยเป็นตัวควบคุมอินเทอร์เฟซผู้ใช้ที่ซ่อนและแสดงเนื้อหา หากคุณอ่านข้อความนี้ใน 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 โดยส่วนใหญ่จะเข้าถึงได้โดยค่าเริ่มต้น หน้าที่ของเราในฐานะนักพัฒนาซอฟต์แวร์คือการดูแลให้เนื้อหาของเราเข้าถึงได้อยู่เสมอ
ตรวจสอบความเข้าใจ
ทดสอบความรู้ด้านรายละเอียดและข้อมูลสรุป
<summary>
ต้องเป็นองค์ประกอบย่อยแรกขององค์ประกอบใด
<details>
<p>
<fieldset>