嵌套在标签页内的Accordion手风琴切换后失效仅刷新可恢复如何解决

失效原因 #

当前手风琴逻辑仅在页面首次加载时，给当时存在的.accordion元素绑定了点击事件。标签页切换时，对应标签的DOM内容通常会被销毁/卸载，切回时重新渲染生成新的.accordion元素，这些新元素没有绑定点击事件，就会出现功能失效、只有刷新页面才能恢复的问题。

推荐解决方案：使用事件委托绑定事件 #

事件委托是将点击事件绑定到页面中不会随标签页切换销毁的上层容器（比如全局document，或者你固定的标签页外层容器），通过事件冒泡机制匹配触发事件的元素，就算DOM重新渲染也不需要重复绑定事件。

你只需要替换原有JS逻辑即可，CSS和HTML代码不需要修改：

// 直接给不会销毁的上层容器（这里用document举例，你可以换成更精准的外层容器ID/类名）绑定点击事件
document.addEventListener('click', function(e) {
  // 匹配点击的是否是手风琴标题元素
  if (e.target.classList.contains('accordion')) {
    const currentAccordion = e.target;
    const currentPanel = currentAccordion.nextElementSibling;
    // 获取当前所有存在的手风琴和面板元素，每次触发时实时查询，避免DOM更新后变量缓存失效
    const allAccordions = document.querySelectorAll(".accordion");
    const allPanels = document.querySelectorAll(".accordion-panel");
    
    if (currentPanel.style.maxHeight) {
      // 点击已展开的手风琴，隐藏所有面板
      hidePanels(allAccordions, allPanels);
    } else {
      // 点击未展开的手风琴，先隐藏所有再展开当前
      showPanel(currentAccordion, currentPanel, allAccordions, allPanels);
    }
  }
})

// 显示指定面板
function showPanel(elem, panel, allAccordions, allPanels) {
  hidePanels(allAccordions, allPanels);
  elem.classList.add("active");
  panel.style.maxHeight = panel.scrollHeight + "px";
}

// 隐藏所有已展开的面板
function hidePanels(allAccordions, allPanels) {
  for (let i = 0; i < allPanels.length; i++) {
    allPanels[i].style.maxHeight = null;
    allAccordions[i].classList.remove("active");
  }
}

备选方案：监听标签页切换事件重新初始化 #

如果不想改原有绑定逻辑，也可以在标签页切换到当前手风琴所在标签的回调事件中，重新执行一遍原有初始化逻辑即可：

// 把原有初始化逻辑封装成函数
function initAccordion() {
  let accHeading = document.querySelectorAll(".accordion");
  let accPanel = document.querySelectorAll(".accordion-panel");

  for (let i = 0; i < accHeading.length; i++) {
    accHeading[i].onclick = function() {
        if (this.nextElementSibling.style.maxHeight) {
           hidePanels(accHeading, accPanel);
        } else {
           showPanel(this, accHeading, accPanel);
        } 
    };
  }
}

function showPanel(elem, accHeading, accPanel) {
  hidePanels(accHeading, accPanel);
  elem.classList.add("active");
  elem.nextElementSibling.style.maxHeight = elem.nextElementSibling.scrollHeight + "px";
}

function hidePanels(accHeading, accPanel) {
  for (let i = 0; i < accPanel.length; i++) {
      accPanel[i].style.maxHeight = null;
      accHeading[i].classList.remove("active");
  }
}

// 页面首次加载执行一次
initAccordion();

// 示例：监听标签页切换事件，切回手风琴所在标签时重新初始化
// 注意：这里的tabChangeEvent要替换成你实际使用的标签页组件的切换回调事件名
yourTabComponent.on('change', (activeTab) => {
  if (activeTab.id === '手风琴所在标签的ID') {
    initAccordion();
  }
})

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