原生 HTML：重溫手風琴-css教學-PHP中文網

原生 HTML：重溫手風琴

Mary-Kate Olsen

發布： 2025-01-07 06:45:40

原創

235 人瀏覽過

六年前，我探索了原生的和創建可訪問的手風琴的元素。從那時起，網路平台不斷發展，為這些元素引入了令人興奮的新功能，例如獨家開放行為和流暢動畫。

原生 HTML：手風琴

安德魯‧博恩・2019 年 1 月 4 日

#html #css #a11y ＃設計

在本文中，我們將重新審視並充分利用現代 CSS 屬性來為您的手風琴增添光彩。我還將分享一個展示這些功能的演示實作。

基礎知識：和

element 提供了一種在 HTML 中建立可切換部分的本機方法，其中

充當可點擊標籤的元素。這使得您可以輕鬆地以最少的努力創建披露小部件。

這是一個簡單的例子：

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

登入後複製

點選摘要可切換關聯內容的可見性。無需 JavaScript！

增強功能：獨特的開放行為

為了模仿傳統的手風琴行為（一次只打開一個部分），您可以在

上使用 name 屬性。元素。當元素具有相同的名稱，開啟一個元素會自動關閉群組中的其他元素。

<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>

登入後複製

此行為是本機行為，並且可以在現代瀏覽器中無縫運作！

使用 CSS 新增平滑動畫

為了讓開啟和關閉過渡更加平滑，我們可以使用現代 CSS 屬性，例如 interpolate-size 和 transition-behavior。

主要特性

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

樣式範例

這是示範中使用的 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;
}

登入後複製