สร้างหีบเพลงเฉพาะ HTML เพื่อซ่อนและเปิดเผยเนื้อหาโดยไม่ต้องใช้ JS หรือ CSS

in ทรัพยากรและเครื่องมือ

คุณทราบหรือไม่ว่ามีโซลูชัน HTML5 แบบเนทีฟสำหรับสร้างปุ่มอ่านเพิ่มเติม/ลดหีบเพลงเพื่อซ่อนและเปิดเผยเนื้อหาด้วย ไม่มี JavaScript หรือ CSS. อ่านต่อไปเพื่อหาวิธีการ

หีบเพลง html5

พื้นที่ และ แท็ก 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 และมัน *ควรจะ* เข้าถึงได้ แต่พบว่าข้อความที่เปิดเผยจริงไม่ได้ประกาศอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอเสมอไป

อ้างอิง:

Mathias Ahlgren เป็นซีอีโอและผู้ก่อตั้ง Website Ratingซึ่งเป็นผู้นำทีมบรรณาธิการและนักเขียนระดับโลก เขาสำเร็จการศึกษาระดับปริญญาโทด้านวิทยาการสารสนเทศและการจัดการ อาชีพของเขามุ่งเน้นไปที่ SEO หลังจากมีประสบการณ์การพัฒนาเว็บไซต์ในช่วงแรกๆ ระหว่างเรียนมหาวิทยาลัย ด้วยประสบการณ์กว่า 15 ปีในด้าน SEO การตลาดดิจิทัล และการพัฒนาเว็บไซต์ จุดมุ่งเน้นของเขายังรวมถึงการรักษาความปลอดภัยเว็บไซต์ ซึ่งได้รับการรับรองจากใบรับรองความปลอดภัยทางไซเบอร์ ความเชี่ยวชาญที่หลากหลายนี้เป็นรากฐานของความเป็นผู้นำของเขาที่ Website Rating.

รับทราบ! เข้าร่วมจดหมายข่าวของเรา
สมัครสมาชิกตอนนี้และรับสิทธิ์เข้าถึงคำแนะนำ เครื่องมือ และทรัพยากรสำหรับสมาชิกเท่านั้นฟรี
คุณสามารถยกเลิกการสมัครได้ตลอดเวลา ข้อมูลของคุณปลอดภัย
รับทราบ! เข้าร่วมจดหมายข่าวของเรา
สมัครสมาชิกตอนนี้และรับสิทธิ์เข้าถึงคำแนะนำ เครื่องมือ และทรัพยากรสำหรับสมาชิกเท่านั้นฟรี
คุณสามารถยกเลิกการสมัครได้ตลอดเวลา ข้อมูลของคุณปลอดภัย
แชร์ไปที่...