点击HTML表头控制嵌套表格对应区域显示/隐藏的问题求助

我看你现在遇到的问题是，点击表头的时候所有嵌套表格内容都出来了，没法做到点A只显示optionA、点B只显示optionB对吧？咱们来调整代码实现这个需求，核心是给表头和对应的内容建立唯一关联，点击时只触发对应内容的显示/隐藏。

第一步：调整HTML结构，建立关联 #

首先给每个表头单元格加上data-target属性，值对应要显示的嵌套内容的类名；同时给每个嵌套表格加上对应的类，初始设置隐藏：

<table border="1">
  <thead>
    <tr>
      <th data-target="optionA">A</th>
      <th data-target="optionB">B</th>
      <th data-target="optionC">C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3">
        <!-- 嵌套表格容器 -->
        <div class="nested-content optionA">
          <table border="1">
            <tr><td>这是Option A的内容</td></tr>
          </table>
        </div>
        <div class="nested-content optionB" style="display:none;">
          <table border="1">
            <tr><td>这是Option B的内容</td></tr>
          </table>
        </div>
        <div class="nested-content optionC" style="display:none;">
          <table border="1">
            <tr><td>这是Option C的内容</td></tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
</table>

第二步：编写JavaScript逻辑 #

给所有表头绑定点击事件，点击时先隐藏所有嵌套内容，再显示当前表头对应的目标内容：

// 获取所有表头单元格
const headers = document.querySelectorAll('thead th');
// 获取所有嵌套内容容器
const nestedContents = document.querySelectorAll('.nested-content');

headers.forEach(header => {
  header.addEventListener('click', () => {
    // 获取当前表头对应的目标类名
    const targetClass = header.dataset.target;
    
    // 先隐藏所有嵌套内容
    nestedContents.forEach(content => {
      content.style.display = 'none';
    });
    
    // 显示对应的目标内容
    const targetContent = document.querySelector(`.${targetClass}`);
    if (targetContent) {
      targetContent.style.display = 'block';
    }
  });
});

第三步：可选优化（加上CSS样式） #

可以给表头加个鼠标指针样式，提示可点击：

thead th {
  cursor: pointer;
  background-color: #f0f0f0;
}

关键逻辑说明 #

1. data-target属性：用来把表头和对应的嵌套内容绑定起来，相当于给它们建立了“配对关系”，点击表头时能精准找到要显示的内容。
2. 点击事件处理：每次点击表头，先把所有嵌套内容隐藏，再只显示当前表头对应的内容，这样就不会出现全部展开的情况了。
3. 初始隐藏：除了默认要显示的内容（比如optionA），其他嵌套内容初始设为display:none，符合默认只显示第一个或者全部隐藏的需求。

这样调整后，点击表头A就只会显示optionA的内容，点击B显示B的内容，完全符合你的需求啦～

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