คุณทราบหรือไม่ว่ามีโซลูชัน HTML5 แบบเนทีฟสำหรับสร้างปุ่มอ่านเพิ่มเติม/ลดหีบเพลงเพื่อซ่อนและเปิดเผยเนื้อหาด้วย ไม่มี JavaScript หรือ CSS. อ่านต่อไปเพื่อหาวิธีการ
รางวัล และ แท็ก HTML5 เป็นทางการa การเปิดเผยองค์ประกอบวิดเจ็ตแต่ จับคู่กับ แท็ก HTML5 จะทำให้คุณ หีบเพลง HTML เท่านั้นบริสุทธิ์.
ความหมาย ไม่มี JS หรือ CSS มันจำเป็น. เจ๋งแค่ไหน!
นี่คือตัวอย่างที่แสดงองค์ประกอบอย่างง่ายด้วย a และ .
นี่คือรหัส:
<details> <summary>Read More</summary> <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p> </details>และนี่คือลักษณะ:
อ่านเพิ่มเติม
นี่คือหีบเพลง HTML5 ดั้งเดิมเพื่อซ่อนและเปิดเผยเนื้อหา สวยเย็นใช่มั้ย?
มันทำงานอย่างไร? รางวัล แท็กทำหน้าที่เป็นเสื้อคลุมสำหรับองค์ประกอบที่สามารถเปิดหรือปิดได้ ผู้ใช้ต้องคลิกบนฉลากที่เป็น แท็กเพื่อเปิดหรือปิดองค์ประกอบ
สไตล์และพฤติกรรมเป็นอย่างไร?
รูปแบบ
คุณสามารถใช้สไตล์ CSS เพื่อปรับแต่งลักษณะที่ปรากฏของกล่องข้อความแสดง ด้านล่างแสดงสไตล์อินเทอร์เฟซแบบแท็บ:
details { font: 16px "Open Sans", Calibri, sans-serif; width: 620px; } details > summary { padding: 2px 6px; width: 15em; background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; cursor: pointer; } details > p { border-radius: 0 0 10px 10px; background-color: #ddd; padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; } details[open] > summary { background-color: #ccf; }ตามค่าเริ่มต้น เคอร์เซอร์จะปรากฏเหมือนลูกศร แต่ถ้าคุณต้องการให้เป็น มือชี้ ให้ใช้สิ่งนี้แทน:
details { cursor: pointer; }พฤติกรรม
พฤติกรรมการตั้งค่านั้นจำกัดมาก มีเพียงสิ่งเดียวที่คุณทำได้ นั่นคือการทำให้ข้อความเปิดเผย เปิดโดยค่าเริ่มต้น.
ในการเริ่มหีบเพลงในสถานะเปิด ให้เพิ่มบูลีน เปิด แอตทริบิวต์ แท็ก:
<details open> <summary>Read More</summary> <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p> </details>อ่านเพิ่มเติม
นี่คือหีบเพลง HTML5 ดั้งเดิมเพื่อซ่อนและเปิดเผยเนื้อหา สวยเย็นใช่มั้ย?
ฉันสามารถใช้แอตทริบิวต์ใดได้บ้าง
แอตทริบิวต์ด้านล่างสามารถใช้สำหรับ แท็ก:
| คุณลักษณะ | ความคุ้มค่า | สรุป |
|---|---|---|
| เปิด | เปิด | ค่าเริ่มต้นคือ ไม่เปิด. |
| id | ความคุ้มค่า | ระบุตัวระบุที่ไม่ซ้ำ |
| ชั้น | ชื่อชั้น | กำหนดชื่อคลาสให้กับองค์ประกอบ |
| สไตล์ | ค่า CSS | กำหนดสไตล์ CSS ให้กับองค์ประกอบ |
แล้วมีข้อจำกัดอะไรบ้าง? มีเสมอจับใช่มั้ย?
ไม่รองรับ Internet Explorer
หีบเพลงที่ใช้ HTML5 เท่านั้นนี้ใช้ไม่ได้กับ Internet Explorer เวอร์ชันใดๆ หากคุณต้องรองรับ IE11 คุณจะต้องใช้โซลูชันทางเลือกอื่นโดยใช้ JQuery รองรับเบราว์เซอร์อื่นๆ ทั้งหมด และ .
ไม่มีแอนิเมชั่นหรือทรานซิชั่นที่ปรับแต่งเอง
แม้ว่าคุณจะสามารถแก้ไขและจัดรูปแบบลักษณะที่ปรากฏ (ดังที่แสดงไว้ด้านบน) คุณจะไม่สามารถทำให้ข้อความแสดงภาพเคลื่อนไหวหรือการเปลี่ยนผ่านได้ หากคุณต้องการทำเช่นนั้น คุณต้องมีโซลูชันหีบเพลง CSS/JSS อื่น
โปรแกรมอ่านหน้าจอและการช่วยสำหรับการเข้าถึง
นี่คือพื้นเมือง HTML5 และมัน *ควรจะ* เข้าถึงได้ แต่พบว่าข้อความที่เปิดเผยจริงไม่ได้ประกาศอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอเสมอไป
อ้างอิง:
