JavaScript手风琴菜单求助：点击展开时关闭其他面板

嘿，别担心！新手刚接触JavaScript时，手风琴菜单的逻辑很容易绕晕，这完全是正常的～我来帮你把问题梳理清楚，并且给出能直接用的解决方案。

先说说你代码里的几个小问题 #

你自己写的openPage函数有几个语法和逻辑上的错误：

1. 变量声明错误：重复使用var声明变量是不对的，应该用逗号分隔一次声明：

   // 错误写法
   var x = document.getElementById("accordian.Home"), var y = document.getElementById("accordian.Contact")
   // 正确写法
   var x = document.getElementById("accordian.Home"), y = document.getElementById("accordian.Contact"), p = document.getElementById("accordian.Pricing");
   

2. 多变量赋值错误：y.style.display,p.style.display = "hidden"这种写法无效，必须分别给每个元素赋值：

   // 错误写法
   y.style.display,p.style.display = "hidden";
   // 正确写法
   y.style.display = "hidden";
   p.style.display = "hidden";
   

3. 逻辑缺陷：三个独立的if语句会导致点击一个按钮时，其他按钮的判断逻辑也可能触发，最终多个面板同时展开，达不到“关闭其他”的效果。

推荐的解决方案（整合你的需求） #

我结合你提供的原始手风琴脚本和标签切换脚本，整理了两种更可靠的实现方式，你可以根据自己的HTML结构选择：

方式一：通过ID指定面板（适合需要精准控制的场景）

首先确保你的HTML结构是这样的（给按钮加defaultOpen指定默认打开项）：

<button class="accordion" id="defaultOpen" onclick="openPage(event, 'Home')">Home</button>
<div id="Home" class="tabcontent">Home面板内容...</div>

<button class="accordion" onclick="openPage(event, 'Contact')">Contact</button>
<div id="Contact" class="tabcontent">Contact面板内容...</div>

<button class="accordion" onclick="openPage(event, 'Pricing')">Pricing</button>
<div id="Pricing" class="tabcontent">Pricing面板内容...</div>

然后使用修正后的openPage函数：

function openPage(evt, pageName) {
  // 1. 隐藏所有面板
  const tabcontent = document.getElementsByClassName("tabcontent");
  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // 2. 移除所有手风琴按钮的active类
  const accordion = document.getElementsByClassName("accordion");
  for (let i = 0; i < accordion.length; i++) {
    accordion[i].classList.remove("active");
  }

  // 3. 显示当前选中的面板，给对应按钮添加active类
  const currentPanel = document.getElementById(pageName);
  currentPanel.style.display = "block";
  evt.currentTarget.classList.add("active");
}

// 页面加载完成后默认打开指定面板
document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("defaultOpen").click();
});

方式二：通过DOM结构关联按钮和面板（更简洁，无需内联onclick）

如果你的HTML结构是按钮紧跟对应面板（不需要额外的ID），可以用这种方式：

<button class="accordion">Home</button>
<div class="tabcontent">Home面板内容...</div>

<button class="accordion">Contact</button>
<div class="tabcontent">Contact面板内容...</div>

<button class="accordion">Pricing</button>
<div class="tabcontent">Pricing面板内容...</div>

对应的JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
  const accordions = document.getElementsByClassName("accordion");
  
  for (let i = 0; i < accordions.length; i++) {
    accordions[i].addEventListener("click", function() {
      // 先关闭所有其他面板并移除active类
      const allPanels = document.getElementsByClassName("tabcontent");
      for (let j = 0; j < allPanels.length; j++) {
        allPanels[j].style.display = "none";
        accordions[j].classList.remove("active");
      }

      // 展开当前点击的面板，给按钮添加active类
      const currentPanel = this.nextElementSibling;
      currentPanel.style.display = "block";
      this.classList.add("active");
    });
  }

  // 默认展开第一个面板
  accordions[0].click();
});

核心逻辑说明 #

两种方式的核心思路都是：

1. 点击任意按钮时，先统一隐藏所有面板、移除所有按钮的active状态
2. 再单独显示当前按钮对应的面板、给当前按钮添加active状态
   这样就能保证同一时间只有一个面板处于展开状态啦～

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