Tag ng HTML <details>

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

Pagsasaayos at Paggamit

<details> Ang tag ay nagbibigay-daan sa user na buksan at sarihin ang iba pang detalye sa anumang dahilan.

<details> Ang tag ay karaniwang ginagamit upang lumikha ng interactive widget na maaaring buksan at sarihin ng user. Sa normal na kalagayan, ang widget ay nakasara. Kapag binuksan, ito ay lililipat at ipapakita ang nilalaman nito.

Anumang uri ng nilalaman ay puwedeng ilagay sa <details> Tag sa loob ng.

Mga payo:<summary> Tag kasama <details> Kasama ang paggamit, maaaring itakda ang nakikita na pamagat para sa detalye. Kapag tinapik ng user ang pamagat, ipapakita: <details> Tukuyin ang nilalaman.

Mga ibang pangkatilingan:

HTML DOM Reference Manual:Detalye Obheto

Egemplo

Halimbawa 1

Tukuyin ang detalye na maaaring buksan at sarihin ng user sa anumang dahilan:

<details>
  <summary>Centro ng Kinabukasan (Epcot Center)</summary>
  <p>Epcot คือสวนสนุกที่เป็นหัวข้อในเวิลด์เดสท์ทินี้ของวอลท์ดิสนีย์ ที่มีสถานที่น่าสนุก สถานที่แสดงสินค้าระหว่างประเทศ ไฟไฟยายที่ได้รับรางวัลและกิจกรรมฤดูกาล</p>
</details>

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

Halimbawa 2

Gamit ang CSS upang itakda ang estilo ng <details> at <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>Centro ng Kinabukasan (Epcot Center)</summary>
  <p>Epcot คือสวนสนุกที่เป็นหัวข้อในเวิลด์เดสท์ทินี้ของวอลท์ดิสนีย์ ที่มีสถานที่น่าสนุก สถานที่แสดงสินค้าระหว่างประเทศ ไฟไฟยายที่ได้รับรางวัลและกิจกรรมฤดูกาล</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>