如何实现点击HTML图片超链接跳转后自动展开对应折叠列表项？

我来帮你搞定这个自动展开折叠项的需求！咱们分几步就能实现点击源文件的鸡尾酒项，跳转后自动展开对应配方的效果：

核心逻辑很简单：跳转时给目标页面传递「要展开哪个项」的标识，目标页面加载时读取这个标识，自动触发对应折叠面板的展开动作。

1. 修改源文件（文件一）的超链接，传递目标项标识 #

原来的超链接只是单纯跳转，现在要给每个鸡尾酒项的链接加上查询参数，把要展开的项名称传过去。比如针对Mojito的链接，修改成这样：

<article class="style1"> 
  <span class="image"> 
    <img src="images/pic01.jpg" alt="" /> 
  </span> 
  <!-- 添加查询参数?item=Mojito，告诉目标页面要展开的项 -->
  <a href="SecondFile.html?item=Mojito"> 
    <h2>Mojito</h2> 
    <div class="content"> 
      <p> Mojito相关信息 </p> 
    </div> 
  </a> 
</article>

其他鸡尾酒项（比如Bloody Mary）就改成 ?item=Bloody%20Mary（空格要转成%20，或者用encodeURIComponent处理特殊字符）。

2. 修改目标文件（文件二）的折叠项，添加唯一标识 #

给每个折叠按钮加上id属性，和传递的参数值对应上，这样能精准定位到要展开的项：

<!-- 给按钮加id="Mojito"，和传递的参数值一致 -->
<button class="accordion" id="Mojito">Mojito</button> 
<div class="panel"> 
  <div class="container-fluid"> 
    <p> Extendable Recipe </p> 
  </div> 
</div>

<!-- 其他项示例 -->
<button class="accordion" id="BloodyMary">Bloody Mary</button> 
<div class="panel"> 
  <div class="container-fluid"> 
    <p> Bloody Mary Recipe </p> 
  </div> 
</div>

3. 修正并增强脚本，实现自动展开功能 #

首先要修正你原来脚本里的拼写错误（比如getElemntsByClassName应该是getElementsByClassName，nextElemntSibling是nextElementSibling，循环里的逗号要改成分号），然后添加页面加载时读取参数并展开对应项的逻辑：

// 保留原有折叠交互逻辑（已修正错误）
var acc = document.getElementsByClassName("accordion"); 
var i; 
for (i = 0; i < acc.length; i++) { 
  acc[i].addEventListener("click", function() { 
    this.classList.toggle("active"); 
    var panel = this.nextElementSibling; 
    if (panel.style.display === "block") { 
      panel.style.display = "none"; 
    } else { 
      panel.style.display = "block"; 
    } 
  }); 
}

// 新增：页面加载时自动展开指定项
window.addEventListener('load', function() {
  // 获取URL里的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const targetItem = urlParams.get('item');
  
  if (targetItem) {
    // 把URL里的%20转回空格，匹配按钮的id
    const formattedItem = targetItem.replace(/%20/g, ' ');
    // 找到对应的折叠按钮
    const targetAccordion = document.getElementById(formattedItem);
    if (targetAccordion) {
      // 模拟点击按钮，触发展开动作
      targetAccordion.click();
      // 也可以直接设置状态（不触发点击事件的话）：
      // targetAccordion.classList.add('active');
      // targetAccordion.nextElementSibling.style.display = 'block';
    }
  }
});

可选方案：用锚点替代查询参数 #

如果你觉得查询参数麻烦，也可以用锚点传递标识，比如源文件链接改成：

<a href="SecondFile.html#Mojito"> 
  <h2>Mojito</h2> 
</a>

然后把脚本里获取标识的部分改成：

// 读取锚点（去掉开头的#号）
const targetItem = window.location.hash.slice(1);

逻辑和查询参数版本完全一致，看你个人习惯选择就行。

这样操作后，点击源文件里的任意鸡尾酒项，跳转到目标页面时对应的配方就会自动展开，其他项保持折叠状态啦！

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