使用JS forEach实现按钮独立控制对应分享容器显隐bug修复

判断正确，bug来自两处逻辑缺陷：

• 全局变量let sharePanelOpen = false只能标记全页面分享面板的统一开关状态，无法区分12组独立分享组件各自的显隐状态
• 现有openSharePanel、closeSharePanel函数执行时会遍历页面所有.share-btn-container和.share-btns批量修改类名，没有建立「当前点击按钮」和「对应分享容器」的关联关系，最终导致点击任意按钮时所有面板同步切换。

核心逻辑调整：点击按钮时仅操作当前按钮和它对应的关联容器，废弃全局统一状态，移除全量遍历所有元素批量改状态的逻辑。
由于你的HTML结构中，分享按钮和对应的分享容器是紧邻的兄弟节点，可以直接通过DOM节点关系找到对应容器，不需要额外加ID或者自定义属性做关联。

修复后完整JS代码 #

const shareButtons = document.querySelectorAll('.share-btns');

shareButtons.forEach((button) => {
  button.addEventListener('click', (e) => {
    e.stopPropagation();
    // 定位当前按钮紧邻的分享容器
    const currentContainer = button.nextElementSibling;
    // 记录当前面板原本的开关状态
    const isCurrentPanelOpen = currentContainer.classList.contains('share-btn-container-active');

    // 以下段为可选逻辑：打开当前面板时自动关闭其他已打开的面板，不需要可删除
    document.querySelectorAll('.share-btn-container.share-btn-container-active').forEach(openContainer => {
      openContainer.classList.remove('share-btn-container-active');
      openContainer.previousElementSibling.classList.remove('share-btns-active');
    });

    // 切换当前组的显隐状态
    if (isCurrentPanelOpen) {
      currentContainer.classList.remove('share-btn-container-active');
      button.classList.remove('share-btns-active');
    } else {
      currentContainer.classList.add('share-btn-container-active');
      button.classList.add('share-btns-active');
    }
  })
})

// 以下段为可选逻辑：点击页面空白区域自动关闭所有打开的分享面板，不需要可删除
document.addEventListener('click', () => {
  document.querySelectorAll('.share-btn-container.share-btn-container-active').forEach(openContainer => {
    openContainer.classList.remove('share-btn-container-active');
    openContainer.previousElementSibling.classList.remove('share-btns-active');
  });
})

其他调整说明 #

• 原有冗余代码可以全部删除：包括全局状态变量sharePanelOpen、旧的openSharePanel/closeSharePanel/togglesharePanel函数、旧的按钮事件绑定逻辑
• 原有CSS代码无需修改，如果出现多个分享面板定位重叠问题，给每组分享按钮+容器的外层加一个position: relative的父容器即可，让绝对定位的面板相对于当前组父元素定位
• 如果后续调整DOM结构，按钮和容器不再是紧邻兄弟，可以给每一组分享模块加统一的类名包裹层（比如.share-wrap），把找容器的逻辑改成button.closest('.share-wrap').querySelector('.share-btn-container')，容错性更高。

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