HTML 中的獨家原生手風琴。

？索引

1. 簡介
2. HTML5 中的手風琴
3. HTML5 中的獨家手風琴
4. 我可以使用嗎？
5. 參考文獻
6. 結論

---

1. 簡介

我個人認為HTML是整個網路上最重要的標記語言，當你開啟任何網頁時我向你保證它的結構是用HTML寫的。

許多人可能認為 HTML 並不那麼重要，但它是整個現代網路的基礎，因此它一直在不斷發展，從我們可以使用的新 API 到更簡單但需要了解的重要功能。

2. HTML5 中的手風琴

HTML 中的手風琴是使用詳細資訊標籤和嵌套摘要標籤來編寫的，以表示每個手風琴。
在專用的手風琴之前，僅使用本機 HTML 不可能使每個手風琴的行為獨立，這意味著可以同時打開多個手風琴。讓我們來看一個例子：

在此範例中，我們可以注意到手風琴可以同時打開，這是預設行為。

3. HTML5 獨家手風琴

自 2024 年 9 月以來，新穎之處在於我們可以在不使用任何 JavaScript 的情況下原生創建專屬手風琴。

獨特的手風琴只允許打開一個摘要標籤，改進了 UI，而無需編寫 JS 程式碼來實現這一點。

要實現此目的，只需將具有相同值的 name 屬性新增至每個摘要標籤即可。
讓我們來看一個例子：

在我們的範例中，每個摘要都有 name="learn-css"，這允許手風琴是獨佔的。

4. 我可以使用嗎？

我們可以發現以下瀏覽器版本可以使用此功能：

透過諮詢 Can I Use，我們驗證了同樣的情況，截至本文發布之日，已覆蓋 89.13% 的瀏覽器。

5. 參考文獻

• https://developer.chrome.com/docs/css-ui/exclusive-accordion?hl=es-419

6. 結論

隨時了解我們最常用的工具的最新發展非常重要，這些新功能可以讓我們的工作變得更加輕鬆，從而為我們節省不止一次。

我在我的 Twitter 帳戶上給您留下了一篇摘要帖子：

---

您可能感興趣的我的作者的其他帖子：

快速指南：在 Git 中製作良好提交訊息的技巧？

克里斯蒂安費爾南多 ・2024 年 12 月 20 日

#git #github ＃GitLab ＃西班牙語

如何在 Windows 上建立 SSH 金鑰並將其連接到 Github？ ？

克里斯蒂安費爾南多 ・2024 年 12 月 13 日

#github #git ＃西班牙語 ＃GitLab

如何在 git 的提交之間導航？ ？

克里斯蒂安費爾南多 ・ 2024 年 11 月 29 日

#git #github ＃西班牙語 #初學者

以上是HTML 中的獨家原生手風琴。的詳細內容。更多資訊請關注PHP中文網其他相關文章！