首頁 > web前端 > css教學 > HTML 中的獨家原生手風琴。

HTML 中的獨家原生手風琴。

Barbara Streisand
發布: 2025-01-11 06:27:42
原創
333 人瀏覽過

?索引

  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中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板