Question

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

我希望在加载时折叠具有特定类的图像，并在JS中定义一些任意标记（比方说，Show），然后使用不同的任意标记（Hide ）处于扩张状态，

内容是从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完成此操作。一种方法是在detail元素打开时隐藏它。

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

Answer 2

悬停动作可以吗？

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 3

我会使用JQuery（如果你还没有使用它），因为你更容易使用dom（比原始的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属性
- 附加Show元素，其中data-toggle属性引用图片的ID和toggler
致toggler：
- 添加一个点击功能，用于切换文本（显示/隐藏）以及元素的可见性及其data-toggle属性中引用的ID

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

4 个答案: