無需 JavaScript 的簡單手風琴

本文原刊於 Rails Designer

---

多年來 HTML 和 CSS 已經變得越來越好，這已經不是什麼秘密了。雖然我已經開始喜歡寫 JavaScript，但只要我能逃脫懲罰，我就會這麼做。

典型的手風琴是不需要 JavaScript 的東西之一。這種元件很容易使用 Vue、Alpine 和 Stimulus 等 JS 框架創建，但對於最基本的版本，您不需要它們中的任何一個。要讓它們看起來不錯，您只需要 CSS。

這個例子就是我想要的。您會發現它不一定是典型的常見問題清單樣式。將其用於像這樣的部分，效果也非常好。

本文出自：

• 基礎知識；
• 增加視覺趣味；
• 使用鮮為人知的進階刺激功能來冷卻漸進增強。

基礎知識

最基本的版本，如下：

它看起來是這樣的：

查看原始文章以取得實例。 ？

這不是最漂亮的，但很有效！

詳細資訊/摘要屬性

詳細資料/摘要元素有一些有趣的技巧。

• 開啟-屬性；您可以設定此屬性以預設開啟一個或多個元素（它也用於下面的 CSS）；
• 新增名稱-屬性；這只允許開啟一個 details 元素。當您打開其中一個時，所有其他都會自動關閉。

檢查一下：

查看原始文章以取得實例。 ？

增加更多視覺趣味

預設值看起來不太好，所以讓我們添加一些 CSS 以使內容更符合您的應用程式。關鍵部分是：

• [&::-webkit-details-marker]：隱藏；這將隱藏預設的 V 形；
• 群組開啟/詳細資訊：旋轉 180；這將根據其狀態旋轉自訂 V 形圖示。

使用 Tailwind CSS 的完整版本如下：

你能用這個做什麼？例如，將 details 元素的狀態儲存在瀏覽器的 localStorage 中，以便其始終保持不變。讓我們用一個小的 Stimulus 控制器來看看：

需要另一個例子嗎？定價頁面上可以看到典型的常見問題清單樣式。

使用純 HTML 加入手風琴就是這麼簡單。您可以從非常簡單的開始，然後使用 CSS 添加一些視覺興趣，最後使用簡單的 Stimulus 控制器進行一些漸進增強。

以上是無需 JavaScript 的簡單手風琴的詳細內容。更多資訊請關注PHP中文網其他相關文章！