点击打开Accordion时关闭其余面板，修复当前面板无法关闭问题

你的问题出在JavaScript逻辑上：当前代码不管点击的Accordion对应的面板是否已经展开，都会先关闭所有面板，再强制打开当前面板。所以哪怕面板本来是展开的，点击后也会立刻被重新打开，导致无法关闭。

修改后的JavaScript代码 #

const accordionEl = document.querySelector('.main')
const panelEls    = accordionEl.querySelectorAll('.panel')

accordionEl.addEventListener('click', ({ target }) => {
  if (target.classList.contains('accordion')) {
    const currentPanel = target.nextElementSibling
    // 先判断当前面板是否已经展开
    const isOpen = currentPanel.classList.contains('open')

    // 关闭所有面板
    panelEls.forEach(panelEl => {
      panelEl.classList.remove('open')
    })

    // 如果当前面板原本是收起的，才打开它；如果是展开的，就保持关闭
    if (!isOpen) {
      currentPanel.classList.add('open')
    }
  }
})

关键改动说明 #

• 增加isOpen变量提前判断当前面板的展开状态
• 关闭所有面板后，通过条件判断决定是否打开当前面板：原本收起则打开，原本展开则保持关闭
• 完全保留「打开一个Accordion时自动关闭其余面板」的核心需求

完整代码示例 #

HTML

<div class="main">
  <button class="accordion"> John Doe </button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>COMPANY A</td>
        <td>FINANCE</td>
        <td>&#9989;</td>
      </tr>
      <tr>
        <td>COMPANY Z</td>
        <td>PMO</td>
        <td>&#10060;</td>
      </tr>
    </table>
  </div>
  <button class="accordion"> John Doe </button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>company A</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
      <tr>
        <td>company B</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
      <tr>
        <td>company C</td>
        <td>HR</td>
        <td>&#10060;</td>
      </tr>
    </table>
  </div>
  <button class="accordion"> John Doe </button>
  <div class="panel">
    <table>
      <th>company</th>
      <th>department</th>
      <th>2025?</th>
      <tr>
        <td>company A</td>
        <td>HR</td>
        <td>&#9989;</td>
      </tr>
    </table>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: White;
  font-family: Sakkal Majalla;
  direction: rtl;
  position: relative;
  z-index: -2;
  -ms-overflow-style: none;

}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
  display: none;
}

/* Chrome */


li {
  list-style: none;
}

a {
  text-decoration: none;
}

.main {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

table {
  border: 1px solid #dededf;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: center;
}

th {
  border: 1px solid #dededf;
  background-color: #eceff1;
  color: #000000;
  padding: 5px;
}

td {
  border: 1px solid #dededf;
  background-color: #ffffff;
  color: #000000;
  padding: 5px;
}

th:nth-child(1) {
  width: 30.9rem;
}

th:nth-child(2) {
  width: 10rem;
}

th:nth-child(3) {
  width: 7rem;
}

.accordion {
  background-color: #ffffff;
  color: black;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  padding: 18px;
  border: none;
  text-align: right;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  width: 50rem;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 8px;
  box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
}

.active,
.accordion:hover {
  border-radius: 8px 8px 0px 0px;
  border-color: rgb(0, 128, 255);
}

.accordion span {
  float: left;
  font-size: 15px;
  color: #116ce4;
}

/* OLD CODE USE BELOW IT
        .panel {
            display: none;
            overflow: hidden;  
        }
*/
.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, padding 0.5s ease;
  padding: 0px;
}

.panel.open {
  max-height: 1000px;
  padding: 18px;
}

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