從所有元素中刪除類，然后在所選元素上切換

Question

我正在嘗試從所有行中刪除一個類，並在所選行上切換它。 我正在嘗試用javascript實現。 我有一堆看起來像下面的行。 目前，我的結果不一致，有時其他行仍保持打開狀態。 我究竟做錯了什么？

<section class="table-body">
  <section class="table-row u-flex">
    <div class="table-category">
       ...
    </div>
  </section>
  <section class="table-row u-flex">
    <div class="table-category">
       ...
    </div>
  </section>
   ...
</section>

使用Javascript

function openMenu(e) {
  for( let i = 0; i < e.closest('.table-body').children.length; i++ ) { 
    document.querySelector('.table-row').classList.remove('is-open');

  }
  // add the active class to the row you just clicked
  if (e.closest('.table-row') !== null) {
      e.closest('.table-row').classList.toggle('is-open'); 
  }
}

Answer 1

如我所見，問題是，首先從每個.table-row刪除該類，然后將其切換到觸發事件的那個。

這導致以下情況：

1.觸發器行具有"is-open" ：

• 預期：之后每行均關閉。
• 實際行為：首先在for循環中刪除"is-open"類，然后使用toggle命令再次添加它。

2.觸發器行沒有“ is-open”類

• 預期：關閉所有行（觸發器除外）。
• 實際行為：符合預期。

我要做的是以下幾點：

function openMenu(e) {
    const openRow = !e.closest('.table-row').classList.contains('is-open');
    for( let i = 0; i < e.closest('.table-body').children.length; i++ ) { 
        document.querySelector('.table-row').classList.remove('is-open');
    }
    if (openRow) {
       e.closest('.table-row').classList.add('is-open'); 
    }
}

這應該可以解決問題。