无需 JavaScript 的简单手风琴

本文最初发表于 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>

它看起来是这样的：

查看原始文章以获取实例。 ？

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

详细信息/摘要属性

详细信息/摘要元素有一些有趣的技巧。

• 打开-属性；您可以设置此属性以默认打开一个或多个元素（它也用于下面的 CSS）；
• 添加名称-属性；这仅允许打开一个 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 以使内容更符合您的应用程序。关键部分是：

• [&::-webkit-details-marker]：隐藏；这将隐藏默认的 V 形；
• 组打开/详细信息：旋转 180；这将根据其状态旋转自定义 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 元素的状态存储在浏览器的 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中文网其他相关文章！