六年前，我探索了原生的<細(xì)節(jié)>和<摘要>創(chuàng)建可訪問的手風(fēng)琴的元素。從那時起，網(wǎng)絡(luò)平臺不斷發(fā)展，為這些元素引入了令人興奮的新功能，例如獨(dú)家開放行為和流暢動畫。

在本文中，我們將重新審視<細(xì)節(jié)>并充分利用現(xiàn)代 CSS 屬性來為您的手風(fēng)琴增添光彩。我還將分享一個展示這些功能的演示實現(xiàn)。

基礎(chǔ)知識：<詳細(xì)信息>和<摘要>

element 提供了一種在 HTML 中創(chuàng)建可切換部分的本機(jī)方法，其中

充當(dāng)可點擊標(biāo)簽的元素。這使得您可以輕松地以最小的努力創(chuàng)建披露小部件。

這是一個簡單的例子：

<details>
  <summary>Read more</summary>
  Some text to be hidden. 
</details>

單擊摘要可切換關(guān)聯(lián)內(nèi)容的可見性。無需 JavaScript！

增強(qiáng)功能：獨(dú)有的開放行為

為了模仿傳統(tǒng)的手風(fēng)琴行為（一次僅打開一個部分），您可以在

上使用 name 屬性。元素。當(dāng)元素具有相同的名稱，打開一個元素會自動關(guān)閉組中的其他元素。

<details name="exclusive">
  <summary>Section 1</summary>
  <p>Content for section 1.</p>
</details>
<details name="exclusive">
  <summary>Section 2</summary>
  <p>Content for section 2.</p>
</details>

此行為是本機(jī)行為，并且可以在現(xiàn)代瀏覽器中無縫運(yùn)行！

使用 CSS 添加平滑動畫

為了使打開和關(guān)閉過渡更加平滑，我們可以使用現(xiàn)代 CSS 屬性，例如 interpolate-size 和 transition-behavior。

主要特性

• interpolate-size：允許在固有尺寸（如自動）和固定尺寸之間進(jìn)行動畫處理。 此屬性目前僅在 Chrome 中受支持。
• transition-behavior：當(dāng)設(shè)置為允許離散時，通常無法進(jìn)行動畫處理的屬性（如可見性和顯示）會等待而不是立即更新。

樣式示例

這是演示中使用的 CSS 的完整示例：

details {
  interpolate-size: allow-keywords;
  overflow: clip;
  margin-top: 0.125em;
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
  border-radius: 3px;
}

details summary {
  display: block;
  cursor: pointer;
  position: relative;
  padding: 0.5em 0.5em 0.5em 0.7em;
  background: #ededed;
  color: #2b2b2b;
  border-radius: 3px 3px 0 0;
}

details:not([open]) summary:hover,
details:not([open]) summary:focus {
  background: #f6f6f6;
  color: #454545;
}

details[open] summary {
  outline: 1px solid #003eff;
  background: #007fff;
  color: #ffffff;
}

details[open]::details-content {
  height: auto;
}

details::details-content {
  height: 0;
  overflow-y: clip;
  transition: content-visibility 475ms allow-discrete, height 475ms;
}

details main {
  padding: 1em 2.2em;
}

它是如何運(yùn)作的

1. 高度動畫： interpolate-size 屬性允許在 height: 0 （關(guān)閉）和 height: auto （打開）之間平滑過渡。不過，目前僅 Chrome 支持此功能。
2. 可見性轉(zhuǎn)換：轉(zhuǎn)換行為屬性確?？梢娦宰兓雌饋頍o縫。

演示：將所有內(nèi)容整合在一起

這是完整的實現(xiàn)：

瀏覽器支持

• interpolate-size: 目前僅在 Chrome 中支持。
• 轉(zhuǎn)換行為：大多數(shù)現(xiàn)代瀏覽器都支持。

對于不支持的瀏覽器，動畫會優(yōu)雅地回退，并且手風(fēng)琴在沒有平滑過渡的情況下仍保持功能。

結(jié)論

和<摘要> elements 與現(xiàn)代 CSS 相結(jié)合，為創(chuàng)建交互式手風(fēng)琴提供了一個輕量級且易于訪問的解決方案。這些新的增強(qiáng)功能使它們對現(xiàn)代 Web 項目更具吸引力。嘗試一下演示，讓您的手風(fēng)琴煥然一新、光彩奪目！

非常感謝您的閱讀。如果您想在 Dev 之外與我聯(lián)系，請來我的 twitter、bsky 和 ??linkedin 打個招呼吧？

以上是原生 HTML：重溫手風(fēng)琴的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！