Javascript 按类将折叠/展开添加到图像

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

我希望具有特定类的图像在加载时折叠，并在前面加上JS中定义的一些任意标记（比如，

Show

），然后在展开状态下有不同的任意标记（

Hide

）

内容是通过降价生成的，因此除了向图像添加类之外，我无法添加其他HTML

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

（我没有“我尝试了什么”代码，因为我不知道该尝试什么。Google solutions提供了很多教程，介绍如何编写单个函数来切换带有大量无关标记的单个元素。我不知道如何使用类将此功能简单地附加到元素，但我知道这是可以做到的，这正是我所需要的。）

编辑以进行澄清

• 这需要处理页面上任意数量的元素——所有具有特定类的元素
• 该类只能添加到要隐藏/显示的元素中，而不能添加到包含该类的元素中
• 我在弄清楚如何做到这一点时遇到的问题是：以编程方式添加只影响创建它们的元素的隐藏/显示“按钮”

我找到了一个纯HTML的。如果你不担心浏览器的支持，这看起来非常简单

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

---

悬停可以吗

。展开{
不透明度：.5；
高度：20px；
过渡：所有1；
}
.展开：悬停{
不透明度：1；
高度：100px；
}

我会使用JQuery（如果您还没有使用它），因为使用dom会更容易（比原始javascript更容易）。您可以从cdn添加它，以避免在您的站点上添加文件和资料：

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

编辑

如果不想使用jquery，可以使用以下引用对其进行翻译：

函数uniqId（）{
返回Math.round（new Date（）.getTime（）+（Math.random（）*100））；
}
$（函数（）{
//忙着做事
$（“.details”）。每个（函数（索引）{
$（this.attr（'id'，uniqId（））；
togl=“Show
”；
美元（本）。之前（togl）；
$（this.addClass（'hidden'）；
});
$（“.toggler”）。每个（函数（索引）{
$（此）。单击（函数（e）{
toggle_image=$（'#'+$（this.attr（'data-toggle'））；
if（$（this.text（）=“Show”）{
$（此）.text（“隐藏”）；
切换_image.removeClass（“隐藏”）；
}否则{
$（此）.text（“显示”）；
切换_image.addClass（“隐藏”）；
}
})
});
});
。隐藏{
显示：无；
}





您使用的是JQuery还是原生JavaScript？悬停不是一个选项。我更关心的是增加加载时间，因为在互联网速度非常慢的地方，很多人都在使用该网站。（例如，第三世界国家）好的。您可以使用我在编辑后的答案上发布的网站来翻译更简单的jquery代码，以满足您的需要。我感谢您的帮助。我并不完全反对使用JQuery。但是您的代码（如您所知）并没有完成我试图做的事情。我遇到的困难是：如何将显示/隐藏按钮附加到类中的每个元素，以便它们显示或隐藏特定的元素。对不起，我仍然不明白您要做什么。我明天会仔细看看，尽量给你一个更好的答案。不过，如果你能再多解释一点你想要实现的目标，我将不胜感激。谢谢。我熟悉
元素。这不是一个好的解决方案，因为浏览器支持，而且我们也可以从纯文本内容生成html。
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

$(function(){
   // Do something on load
   $('img.classHidenOnLoad').hide();

   $("span:contains('Hide')").click(function(){
    alert("hide");   
   });
   $("span:contains('Show')").click(function(){
    alert("show");
   });
});