如何写CSS、JS实现图片隐藏与展开

技术交流与词典编修
1

示例.zip (4.6 KB)

要求：隐藏所有例证图片，在书证标题 如“龍龕手鑑” 后增加 +/- 按钮，默认隐藏图片 <img …> ，隐藏时“龍龕手鑑” 后增加 +按钮，点击 标题+ 时，展开图片。同时 +按钮变成-，再次点击则又隐藏。怎样写CSS或JS，以实现此效果。最好不要改动 html

问了几个大模型AI，都没有解决问题。

基本解决：

网页可展开/折叠的内容

不用写JS，CSS控制即可。

<style>
    summary {
        list-style: none;
    }
    summary::after {
        content: '➕';
    }
    details[open] summary::after {
        content: '➖';
    }
</style>

<details>
   <summary open="false">說文解字(大徐本)</summary>
    <img class="xtzlb_img book-img" src="b.webp" />  
       这里是隐藏的内容  
</details>

如果想默认展开则把 details 改成 details open 或者不用改html,只改JS即可：

/*默认初始状态图片展开*/
document.addEventListener('DOMContentLoaded', function () {
    // 获取所有的 <details> 元素
    const detailsElements = document.querySelectorAll('details');
    
    // 遍历并设置每个 <details> 元素为展开状态
    detailsElements.forEach(details => {
        details.open = true;
    });
});
2

挺简单的，
但是不知道标题是哪个，
图片也好几个，那些是要隐藏的，哪些不是。

截图框选一下，告诉我是哪些。

还有 标题后的「+/-」是按钮，还是标题本身是按钮。主要是前者可能太小不好点击，需要css处理一下。

3

M大的说文，就这个效果啊。隐藏显示图片=隐藏显示DIV

<a id="BibBtn" onclick="toggleDiv('Bib')">▽</a>

var isBibShown=false;
function togBib(){
	isBibShown=!isBibShown;
	document.getElementById("BibBtn").textContent=isBibShown?"▼":"▽";
	document.getElementById("Bib").style.display=isBibShown?"block":"none";
}
1 个赞
4

image
image931×1346 159 KB

image
image931×1346 159 KB

这样子。

6

看起来已经解决了？

7

没有。还有很多问题。

8

没看懂，在顶层我贴了一个词条，你把改好的 CSS及html发上来看看。

9

试了一下，单个可以。针对多个标签无效。

11

說文解字(大徐本)
标题的位置发生了变化，提到前面去了，是吧

12

调试一番后，用你的方法，基本实现我要的效果。感谢 :pray:

1 个赞