HTML <details> Tag
ການກໍານົດ ແລະ ການນໍາໃຊ້
<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 |