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。触发行没有课程＆＃34; is-open＆＃34;

预期：除了触发器之外，每一行都会关闭。
实际行为符合预期。

我要做的是：

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

这应该可以解决问题。

从所有元素中删除类，然后在所选元素

1 个答案: