javascript - 按类别向图像添加折叠/展开

Question

如何根据类别向页面上的图像添加隐藏/显示(折叠/展开)功能？

我希望具有特定类的图像在加载时折叠，并在 JS 中定义一些任意标记(比方说， <span>Show</span> )，然后在扩展中具有不同的任意标记( <span>Hide</span> )状态，

内容是从 markdown 生成的，因此除了向图像添加类之外，我无法添加其他 HTML。

我更喜欢一个不需要将整个 JS 库添加到站点的解决方案。这是一个以文档为中心的网站，动态功能很少。

(我没有“我尝试过的”代码，因为我不知道要尝试什么。谷歌搜索解决方案提供了很多关于如何编写单个函数来切换具有大量无关标记的单个元素的教程。我不知道如何使用类来简单地将这个功能附加到元素上，但我知道这是可以完成的，这就是我所需要的。)

编辑以澄清

• 这需要适用于页面上任意数量的元素——所有具有特定类的元素。
• 该类只能添加到要隐藏/显示的元素中，而不能添加到包含元素中。
• 我在弄清楚如何执行此操作时特别遇到的问题是:以编程方式添加仅影响创建它们的元素的隐藏/显示“按钮”。

Answer 1

我发现了一个answer in another question那是纯HTML。如果您不担心浏览器支持，这似乎非常简单。

<details>
    <summary>text before expanding</summary>
    <p>Show when open</p>
</details>
<span>Show when closed</span>

至于设置“关闭时显示”范围的样式，您可以使用 CSS 来完成。一种方法是在详细信息元素打开时隐藏它。

details[open] + span {
   display: none;
}