点击锚点切换表格多行显示隐藏：现有JS代码失效求助

问题描述 #

我有一个包含多行的表格，其中某一行内存在class为.pending-wide-col-name的锚点元素，需求为点击该锚点时，切换所有class为.results-secondary-hidden-row的表格行的.dis-none类（控制显示/隐藏）。以下是我的HTML、CSS代码，以及无法正常工作的JavaScript代码，请求排查并解决问题：

原代码 #

HTML代码 #

<table>
 <tbody>
  <tr class="results-main-row has-hidden-row">
   <td>
    <a class="pending-wide-col-name">some text</a>
   </td>
  </tr>
  <tr class="results-secondary-hidden-row dis-none">
   <td>some text</td>
  </tr>
  <tr class="results-secondary-hidden-row dis-none">
   <td>some text</td>
  </tr>
  <tr class="results-secondary-hidden-row dis-none">
   <td>some text</td>
  </tr>
 </tbody>
</table>

CSS代码 #

.dis-none {
    display: none;
}

JavaScript代码 #

var mainRowWithHiddenChild = document.querySelector('.has-hidden-row .pending-wide-col-name');
var secondaryHiddenRow = document.querySelectorAll('.results-secondary-hidden-row');
mainRowWithHiddenChild.addEventListener('click', function () {
  for (let i = 0; i < mainRowWithHiddenChild.length; i++) {
    secondaryHiddenRow[i].classList.toggle('dis-none');
  }
});

错误分析 #

1. 循环对象错误：document.querySelector()返回单个DOM元素，并非数组/类数组对象，因此mainRowWithHiddenChild.length的值为undefined，循环条件不成立，内部代码从未执行。
2. 循环逻辑错误：即使获取多个元素，循环也应遍历secondaryHiddenRow（所有隐藏行）的长度，而非点击元素的长度。

修复后的JavaScript代码 #

// 获取锚点元素
var toggleBtn = document.querySelector('.has-hidden-row .pending-wide-col-name');
// 获取所有需要切换的隐藏行
var hiddenRows = document.querySelectorAll('.results-secondary-hidden-row');

toggleBtn.addEventListener('click', function () {
  // 遍历所有隐藏行，切换dis-none类
  hiddenRows.forEach(row => {
    row.classList.toggle('dis-none');
  });
});

可选优化（单组主行对应隐藏行场景） #

如果表格存在多组主行与对应隐藏行，不想全局切换所有隐藏行，可修改逻辑仅切换当前主行后的同组隐藏行：

var toggleBtns = document.querySelectorAll('.has-hidden-row .pending-wide-col-name');

toggleBtns.forEach(btn => {
  btn.addEventListener('click', function () {
    // 获取当前主行
    const mainRow = this.closest('.has-hidden-row');
    // 遍历主行后的所有兄弟隐藏行，直到遇到下一个主行
    let nextRow = mainRow.nextElementSibling;
    while (nextRow && nextRow.classList.contains('results-secondary-hidden-row')) {
      nextRow.classList.toggle('dis-none');
      nextRow = nextRow.nextElementSibling;
    }
  });
});

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