本文最初发表于 Rails Designer
多年来 HTML 和 CSS 已经变得越来越好，这已经不是什么秘密了。虽然我已经开始喜欢编写 JavaScript，但只要我能逃脱惩罚，我就会这么做。
典型的手风琴是不需要 JavaScript 的东西之一。这种组件很容易使用 Vue、Alpine 和 Stimulus 等 JS 框架创建，但对于最基本的版本，您不需要它们中的任何一个。要让它们看起来不错，您只需要 CSS。
这个例子就是我想要的。您会发现它不一定是典型的常见问题解答列表样式。将其用于像这样的部分，效果也非常好。
本文来自：
最基本的版本，如下所示：
<details>
<summary>
Show me more
</summary>
This is more!
</details>
<details>
<summary>
Show me even more
</summary>
This is even more!
</details>
它看起来是这样的：
查看原始文章以获取实例。 ？
这不是最漂亮的，但很有效！
详细信息/摘要元素有一些有趣的技巧。
<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 以使内容更符合您的应用程序。关键部分是：
使用 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 元素的状态存储在浏览器的 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 的简单手风琴的详细内容。更多信息请关注PHP中文网其他相关文章！
