แบบอื่นๆ HTML <details> แทร็ก

  • หน้าก่อนหน้า <del>
  • หน้าต่อไป <dfn>

การกำหนดและการใช้งาน

<details> โทรนั้นกำหนดรายละเอียดที่ผู้ใช้สามารถเปิดและปิดตามความต้องการ:

<details> โทรนั้นมักถูกใช้เพื่อสร้างส่วนที่ผู้ใช้สามารถเปิดและปิดได้เพื่อสื่อสาร。โดยมาตรฐาน ส่วนนี้จะปิดตัว

เนื้อหาทุกชนิดสามารถจัดไว้ได้ใน <details> โทรนั้น

คำแนะนำ:<summary> โทร กับ <details> ใช้ร่วมกันเพื่อกำหนดหัวข้อที่สามารถเห็นได้สำหรับรายละเอียด。เมื่อผู้ใช้คลิกหัวข้อนั้น จะแสดง <details> กำหนดเนื้อหา

ดูเพิ่มเติมที่:

คู่มืออ้างอิง HTML DOMเป้าหมาย Details

ตัวอย่าง

ตัวอย่าง 1

กำหนดรายละเอียดที่ผู้ใช้สามารถเปิดและปิดตามความต้องการ:

<details>
  <summary>สำนักงานกลางโลกในอนาคต (Epcot Center)</summary>
  <p>Epcot คือสวนสนุกในสวนสนุก Walt Disney World Resort ที่มีสถานที่น่าสนุก, ห้องแสดงนานาชาติ, ไฟไฟแห่งรางวัลและกิจกรรมฤดูกาล</p>
</details>

ลองด้วยตัวเอง

ตัวอย่าง 2

ตั้งรูปแบบ CSS สำหรับ <details> และ <summary> ดังนี้:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>สำนักงานกลางโลกในอนาคต (Epcot Center)</summary>
  <p>Epcot คือสวนสนุกในสวนสนุก Walt Disney World Resort ที่มีสถานที่น่าสนุก, ห้องแสดงนานาชาติ, ไฟไฟแห่งรางวัลและกิจกรรมฤดูกาล</p>
</details>
</body>
</html>

ลองด้วยตัวเอง

แบบภาพ

แบบภาพ ค่า คำอธิบาย
open open กำหนดรายละเอียดควรเป็นที่เห็นได้โดยผู้ใช้ (เปิด)

การใช้งานตัวแปลทั่วไป

<details> แบบภาพยังสนับสนุน รายละเอียดของการใช้งานตัวแปลทั่วไปใน HTML.

รายละเอียดของสัญญาณเหตุ

<details> แบบภาพยังสนับสนุน รายละเอียดของสัญญาณเหตุใน HTML.

การตั้งค่า CSS โดยเริ่มต้น

ส่วนใหญ่ของบราวเซอร์จะแสดงค่าเริ่มต้นดังนี้ <details> องค์ประกอบ：

details {
  display: block;
}

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางนี้บอกเล่าเวอร์ชั่นบราวเซอร์ที่สนับสนุนองค์ประกอบนี้ทั้งหมด

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0
  • หน้าก่อนหน้า <del>
  • หน้าต่อไป <dfn>