添加折叠/扩展到图像中的图像

Question

如何基于类上的图像添加hide/show（collapse/explapse）功能？

？

我希望带有特定类的图像在负载上崩溃，并在JS中定义的一些任意标记（例如，<span>Show</span>），然后在扩展状态下具有不同的任意标记（<span>Hide</span>），p>内容是从Markdown生成的，因此除了将类添加到图像外，我无法添加其他HTML。

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

（我没有"我尝试过的内容"代码，因为我不知道该尝试什么。谷歌解决方案带来了许多有关如何编写单个函数以用大量无关标记切换单个元素的教程。不知道如何使用类简单地将此功能附加到元素上，但我知道可以做到这一点，这就是我所需要的。）

编辑澄清

• 这需要在页面上的任意数量元素上工作---所有具有特定类别的元素。
• 只能将类仅添加到要隐藏/显示的元素中----而不是包含元素。
• 我在弄清楚如何执行此操作时特别具体存在的问题是：编程性添加hide/show仅影响创建它们的元素的"按钮"。

Answer 1

我在另一个纯HTML的问题中找到了一个答案。如果您不担心浏览器支持，那似乎超级简单。

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

为了造型"闭合时显示"跨度，您可以使用CSS完成此操作。一种方法是在打开详细信息时将其隐藏。

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

Answer 2

可以使用悬停操作吗？

.expand {
  opacity: .5;
  height: 20px;
  transition: all 1s;
}
.expand:hover {
  opacity: 1;
  height: 100px;
}

<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="expand" />
<img src="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="expand" />

Answer 3

我将使用jQuery（如果您尚未使用），因为您可以使用DOM（比RAW JavaScript更容易）。您可以从CDN添加它，以免在您的网站上添加文件和内容：

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

有jQuery后，您可以：

$(function(){
   // Do something on load
   $('img.classHidenOnLoad').hide();
   $("span:contains('Hide')").click(function(){
    alert("hide");   
   });
   $("span:contains('Show')").click(function(){
    alert("show");
   });
});

编辑

如果您不想使用jQuery，则可以使用此参考来翻译它：

http://youmightnotneedjquery.com/

Answer 4

function uniqId() {
  return Math.round(new Date().getTime() + (Math.random() * 100));
}
$(function(){
   // Do something on load
   $(".details").each(function(index){
    $(this).attr('id', uniqId());
    togl = "<span class='toggler' data-toggle='" + $(this).attr('id') + "'>Show</span><br>";
    $(this).before(togl);
    $(this).addClass('hidden');
   });
   
   $(".toggler").each(function(index){
     $(this).click(function(e){
       toggle_image = $('#' + $(this).attr('data-toggle'));
       if ($(this).text() == "Show") {
         $(this).text("Hide");
         toggle_image.removeClass("hidden");
       } else {
         $(this).text("Show");
         toggle_image.addClass("hidden");
       }
     })
   });
});

.hidden {
  display:none;
}

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<img class="details" src="http://via.placeholder.com/200x200">
<br>
<img class="" src="http://via.placeholder.com/100x200">
<br>
<img class="details" src="http://via.placeholder.com/200x100">

这就是它的作用：

• 到类details的每个元素：
  • 添加ID属性
  • 附加<span>Show</span>元素，带有data-toggle属性引用图像的ID和一类toggler
• 到每个toggler：
  • 添加单击功能，该功能可以切换文本（显示/hide）和元素的可见性，并在其data-toggle属性中引用的ID
  中引用的ID