HTML中PNG图片点击折叠功能求助：实现收起逻辑

直接修改你的函数，通过判断按钮当前状态来切换展开/收起逻辑，同时修正原代码里的语法问题（img标签的style属性中width的赋值应该用冒号而非等号）：

修改后的代码 #

JavaScript #

function myFunction() {
  const button = document.querySelector('#testButton');
  const demo = document.getElementById("demo");
  
  if (button.innerHTML === '+') {
    // 展开：插入图片，按钮改为减号
    demo.innerHTML = `<img style="width: 100%; height:auto" src="https://sharepoint2.web.PNG"/>`;
    button.innerHTML = '-';
  } else {
    // 收起：清空内容，按钮改回加号
    demo.innerHTML = '';
    button.innerHTML = '+';
  }
}

HTML #

<button id="testButton" onclick="myFunction()">+</button>
<p id="demo"></p>

关键逻辑说明 #

• 先获取按钮和目标区域的DOM元素引用，避免每次点击重复查询DOM，提升性能
• 通过判断按钮当前的文本内容，区分展开/收起操作：
  • 当按钮显示+时，插入图片并将按钮改为-
  • 当按钮显示-时，清空目标区域内容并将按钮改回+
• 修正了原代码中image标签的写法（标准标签是img）和style属性里的语法错误（width= 100%改为width: 100%）

内容的提问来源于stack exchange，提问作者Maxwell_Redeker