Javascript 从所有元素中删除类，然后在选定元素上切换该类

我试图从所有行中删除一个类，并在所选行上切换它。我正试图用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'); 
  }
}

功能openMenu（e）{
对于（设i=0；i

在我看来，问题是，首先从每个

表行

中删除类，然后将其切换到触发事件的行

这将导致以下情况：

1。触发器行具有类

“已打开”

：

• 应为：之后将关闭每一行
• 实际行为：首先在for循环中删除

  “is open”

  类，然后使用toggle命令再次添加它

2.触发器行没有类“已打开”

• 应为：除触发行外，所有行均已关闭
• 实际行为：如预期

我要做的是：

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'); 
    }
}

功能openMenu（e）{
const openRow=！e.closest（'.table row'）.classList.contains（'is-open'）；
对于（设i=0；i

---

这应该可以做到。

如何调用

openMenu

document。querySelector（）返回一个元素数组。您正试图像访问单个元素一样访问它。此外，您将获得比从doucment级别重新查询的最接近的e.closest的长度。您应该在Begging处查询行。@EricHerlitz我用onClick事件调用它。这不起作用，并且引入了错误行为。有时菜单关闭，有时不关闭。此外，它并没有从所有行中删除“is open”。我有多行同时使用“is open”类。仔细查看后，您的代码似乎只适用于第一个“.table行”。它会打开所有其他的，但不会关闭它们。