本文最初發(fā)表于 Rails Designer

---

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

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

這個例子就是我想要的。您會發(fā)現(xiàn)它不一定是典型的常見問題解答列表樣式。將其用于像這樣的部分，效果也非常好。

本文來自：

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

基礎(chǔ)知識

最基本的版本，如下所示：

<details>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details>
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

它看起來是這樣的：

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

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

詳細信息/摘要屬性

詳細信息/摘要元素有一些有趣的技巧。

• 打開-屬性；您可以設(shè)置此屬性以默認打開一個或多個元素（它也用于下面的 CSS）；
• 添加名稱-屬性；這僅允許打開一個 details 元素。當您打開其中一個時，所有其他都會自動關(guān)閉。

<details name="more" open>
  <summary>
    Show me more
  </summary>

  This is more!
</details>

<details name="more">
  <summary>
    Show me even more
  </summary>

  This is even more!
</details>

檢查一下：

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

增加更多視覺趣味

默認值看起來不太好，所以讓我們添加一些 CSS 以使內(nèi)容更符合您的應(yīng)用程序。關(guān)鍵部分是：

• [&::-webkit-details-marker]：隱藏；這將隱藏默認的 V 形；
• 組打開/詳細信息：旋轉(zhuǎn) 180；這將根據(jù)其狀態(tài)旋轉(zhuǎn)自定義 V 形圖標。

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

<details>



<p>This is how it looks:</p>

<blockquote>
<p>View the original article to live examples. ?</p>
</blockquote>

<h2>
  
  
  Progressive enhancements
</h2>

<p>A <strong>toggle</strong> event is dispatched on the <strong>details</strong>-element whenever it state changes. So you could listen for it like this:<br>
</p>

<pre class="brush:php;toolbar:false">details.addEventListener("toggle", (event) => {
  if (details.open) {
    // Do something
  } else {
    // Do something else
  }
});

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

// app/javascript/controllers/accordion_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    this.element.open = localStorage.getItem(this.element.id) === "open";

    this.#attachEventListeners();
  }

  // private

  #attachEventListeners() {
    this.element.addEventListener("toggle", (event) => {
      if (this.element.open) {
        localStorage.setItem(this.element.id, "open");
      } else {
        localStorage.removeItem(this.element.id);
      }
    });
  }
}

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

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

以上是無需 JavaScript 的簡單手風琴的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！