JavaScript多元素隐藏功能异常修复问询：仅首个元素生效，第二、第三个盒子点击无响应（禁止手动修改ID，需通过JS解决）

我一眼就看出问题所在了：你页面里多个元素重复使用了同一个id="av-h"，而document.getElementById()只会返回第一个匹配该id的元素，所以后面两个盒子的按钮点击后，其实还是在操作第一个盒子里的av-h元素，自然看不到效果。虽然HTML规范要求id必须唯一，但你说不能手动修改元素ID，那我们就从JavaScript入手，通过元素的层级关系来定位目标元素。

修复思路 #

1. 让点击函数能获取到当前触发事件的按钮
2. 通过按钮向上找到它所属的父容器（比如.av-fbox、.av-hboxl、.av-hboxr）
3. 在这个父容器内部定位对应的切换元素，避免跨盒子影响

修改后的JavaScript代码 #

function avmyFunction(event) { 
  // 获取当前点击的按钮（兼容点击按钮内部图标的情况）
  const btn = event.target.closest('.av-btn');
  // 找到按钮所属的父容器
  const container = btn.closest('.av-fbox, .av-hboxl, .av-hboxr');
  // 在当前容器内找到要切换的元素
  const targetElement = container.querySelector('.av-title-h'); 
  
  // 执行显示/隐藏切换
  if (targetElement.style.display === "none") { 
    targetElement.style.display = "block"; 
    // 顺便切换按钮图标（优化交互体验）
    btn.querySelector('#av-icona').style.display = "inline";
    btn.querySelector('#av-iconb').style.display = "none";
  } else { 
    targetElement.style.display = "none"; 
    btn.querySelector('#av-icona').style.display = "none";
    btn.querySelector('#av-iconb').style.display = "inline";
  } 
}

同步修改HTML的点击事件 #

把每个按钮的onclick属性改成传递事件参数的形式：

<button class="av-btn" onclick="avmyFunction(event)"><span id="av-icona">&#x2716;</span><span id="av-iconb">&#43;</span></button>

方案说明 #

• event.target.closest('.av-btn')：确保不管点击的是按钮本身还是内部的图标，都能准确拿到按钮元素
• closest('.av-fbox, .av-hboxl, .av-hboxr')：精准定位到当前按钮所属的盒子容器，避免干扰其他盒子的元素
• container.querySelector('.av-title-h')：只在当前盒子内部查找要切换的元素，保证每个按钮只操作自己对应的内容

另外提一句，你页面里的#av-icona和#av-iconb也重复使用了id，这同样不符合HTML规范，但上面的代码通过btn.querySelector()在按钮内部查找这些元素，暂时不需要修改id也能正常工作。

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