Accordion组件技术求助：如何实现单次仅显示一个事件

嘿，我来帮你搞定这个单面板展开的Accordion需求！这种“手风琴”效果其实挺常见的，核心思路就是每次点击新面板时，先关闭所有已展开的面板，再打开当前点击的那个。下面我给你分几种常见技术场景的实现方案，你可以根据自己的项目栈来选：

如果你的项目没有用前端框架，原生JS就能轻松实现：

步骤说明 #

1. 给所有Accordion的触发标题绑定点击事件
2. 点击时先遍历所有面板，关闭已展开的（移除激活类/隐藏内容）
3. 再激活当前点击的面板内容

代码示例 #

<!-- HTML结构 -->
<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">面板1</button>
    <div class="accordion-content">面板1的内容：这里可以放任意文本、图片或者表单~</div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">面板2</button>
    <div class="accordion-content">面板2的内容：这是另一个面板的展示内容</div>
  </div>
  <div class="accordion-item">
    <button class="accordion-header">面板3</button>
    <div class="accordion-content">面板3的内容：手风琴效果就是这么简单！</div>
  </div>
</div>

/* 基础样式 */
.accordion-header {
  width: 100%;
  padding: 12px;
  text-align: left;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.accordion-content {
  display: none;
  padding: 15px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.accordion-content.active {
  display: block;
}

// 核心逻辑
const accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(header => {
  header.addEventListener('click', () => {
    // 先关闭所有已展开的面板
    document.querySelectorAll('.accordion-content.active').forEach(content => {
      content.classList.remove('active');
    });
    // 打开当前点击的面板内容
    const currentContent = header.nextElementSibling;
    currentContent.classList.add('active');
  });
});

React里用状态管理来跟踪当前展开的面板ID是最直观的方式：

import { useState } from 'react';

function SinglePanelAccordion() {
  // 用状态记录当前展开的面板ID，初始为null（全部关闭）
  const [expandedPanelId, setExpandedPanelId] = useState(null);

  const handlePanelClick = (panelId) => {
    // 点击当前已展开的面板时，可以选择关闭它（这里做了判断）
    setExpandedPanelId(expandedPanelId === panelId ? null : panelId);
  };

  // 模拟面板数据
  const panels = [
    { id: 'panel-1', title: '用户设置', content: '在这里修改你的个人信息、密码等' },
    { id: 'panel-2', title: '通知设置', content: '管理邮件、推送通知的接收方式' },
    { id: 'panel-3', title: '隐私设置', content: '控制你的数据分享权限' }
  ];

  return (
    <div className="accordion">
      {panels.map(panel => (
        <div key={panel.id} className="accordion-item">
          <button 
            className="accordion-header"
            onClick={() => handlePanelClick(panel.id)}
          >
            {panel.title}
          </button>
          {/* 只有当前ID匹配的面板才会显示 */}
          {expandedPanelId === panel.id && (
            <div className="accordion-content">
              {panel.content}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

export default SinglePanelAccordion;

Vue的响应式变量可以轻松控制面板的显示隐藏：

<template>
  <div class="accordion">
    <div class="accordion-item" v-for="panel in panels" :key="panel.id">
      <button 
        class="accordion-header"
        @click="togglePanel(panel.id)"
      >
        {{ panel.title }}
      </button>
      <div class="accordion-content" v-show="expandedPanelId === panel.id">
        {{ panel.content }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式变量记录当前展开的面板ID
const expandedPanelId = ref(null);
const panels = [
  { id: 1, title: '商品分类', content: '浏览不同品类的商品' },
  { id: 2, title: '优惠活动', content: '查看当前正在进行的折扣活动' },
  { id: 3, title: '售后政策', content: '了解退换货、保修等规则' }
];

const togglePanel = (panelId) => {
  expandedPanelId.value = expandedPanelId.value === panelId ? null : panelId;
};
</script>

<style scoped>
.accordion-header {
  width: 100%;
  padding: 12px;
  text-align: left;
  background: #f5f5f5;
  border: none;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}
.accordion-content {
  display: none;
  padding: 15px;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}
.accordion-content[v-show] {
  display: block;
}
</style>

如果你用的是现成的UI组件库（比如Ant Design、Bootstrap、Element Plus），它们几乎都自带单面板展开的Accordion组件，只需要开启对应属性即可：

• Ant Design React：给<Accordion>添加accordion属性
• Element Plus：给<el-accordion>添加unique-opened属性
• Bootstrap：用accordion组件时，所有面板的data-bs-parent指向同一个容器ID

比如Ant Design的简单示例：

import { Accordion } from 'antd';

const { Panel } = Accordion;

function AntdSingleAccordion() {
  return (
    <Accordion accordion> {/* 关键属性：accordion */}
      <Panel header="面板1" key="1">面板1内容</Panel>
      <Panel header="面板2" key="2">面板2内容</Panel>
    </Accordion>
  );
}

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