如何通过锚点链接自动打开对应手风琴面板

解决方法 #

你只需要在原有JS逻辑的基础上，补充页面初始加载和锚点变化的监听逻辑，即可实现锚点跳转时自动触发对应手风琴面板展开的效果，补充后的完整代码如下：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* 切换active类，标记当前控制面板的按钮状态 */
    this.classList.toggle("active");

    /* 切换面板的显示/隐藏状态 */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

// 页面加载完成后，如果URL携带锚点，自动打开对应面板
window.addEventListener('load', function() {
  if (location.hash) {
    const targetAccordion = document.querySelector(location.hash);
    // 验证锚点对应元素是手风琴按钮且未展开时，触发点击
    if (targetAccordion && targetAccordion.classList.contains('accordion') && !targetAccordion.classList.contains('active')) {
      targetAccordion.click();
    }
  }
});

// 监听锚点变化事件，点击锚点链接时触发对应面板展开
window.addEventListener('hashchange', function() {
  if (location.hash) {
    const targetAccordion = document.querySelector(location.hash);
    if (targetAccordion && targetAccordion.classList.contains('accordion') && !targetAccordion.classList.contains('active')) {
      targetAccordion.click();
    }
  }
});

逻辑说明 #

• 保留了你原来的手风琴点击交互逻辑，所有交互规则和之前完全一致
• 新增页面加载监听：如果用户直接访问带锚点的链接，进入页面后会自动展开对应面板
• 新增锚点变化监听：点击页面内的锚点链接时，会自动判断锚点对应元素是否为手风琴按钮，未展开时触发点击展开
• 逻辑兼容普通锚点跳转，如果锚点对应的元素不是手风琴按钮，不会做额外处理，不影响页面其他锚点的正常使用

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