React实现点击标题单独切换对应表格的显示与隐藏

下面提供两种可行的原生JS方案，完全满足你单独控制表格显示隐藏的需求：

方法1：利用DOM兄弟元素关系（推荐，结构相邻时使用） #

如果渲染后的标题和对应表格是直接相邻的结构，直接通过兄弟元素定位最省心，无需额外添加标识：

<!-- 渲染生成的示例结构 -->
<h3 class="table-toggle-title">表格1标题</h3>
<table class="content-table">
  <!-- 表格内容 -->
</table>

<h3 class="table-toggle-title">表格2标题</h3>
<table class="content-table">
  <!-- 表格内容 -->
</table>

<h3 class="table-toggle-title">表格3标题</h3>
<table class="content-table">
  <!-- 表格内容 -->
</table>

// 给所有标题绑定点击事件
document.querySelectorAll('.table-toggle-title').forEach(title => {
  title.addEventListener('click', function() {
    // 获取当前标题的下一个兄弟表格元素
    const targetTable = this.nextElementSibling;
    // 切换显示状态
    targetTable.style.display = targetTable.style.display === 'none' ? '' : 'none';
  });
});

方法2：索引匹配方案（对应你的思路） #

如果标题和表格结构不相邻，或者需要更明确的关联关系，可以给标题和表格添加相同的索引标识（比如data-index），通过索引匹配对应表格：

<!-- 渲染时给标题和表格添加对应索引 -->
<h3 class="table-toggle-title" data-index="0">表格1标题</h3>
<table class="content-table" data-index="0">
  <!-- 表格内容 -->
</table>

<h3 class="table-toggle-title" data-index="1">表格2标题</h3>
<table class="content-table" data-index="1">
  <!-- 表格内容 -->
</table>

<h3 class="table-toggle-title" data-index="2">表格3标题</h3>
<table class="content-table" data-index="2">
  <!-- 表格内容 -->
</table>

const titles = document.querySelectorAll('.table-toggle-title');
const tables = document.querySelectorAll('.content-table');

titles.forEach((title, idx) => {
  title.addEventListener('click', () => {
    // 方式1：通过循环索引直接匹配
    const targetTable = tables[idx];
    // 方式2：通过data-index属性匹配（更灵活）
    // const targetTable = document.querySelector(`.content-table[data-index="${title.dataset.index}"]`);
    
    targetTable.style.display = targetTable.style.display === 'none' ? '' : 'none';
  });
});

补充说明 #

• 如果需要默认隐藏表格，直接在CSS中设置.content-table { display: none; }即可。
• 你之前出现点击隐藏所有表格的问题，大概率是事件绑定中错误选中了所有表格元素，没有精准定位当前标题对应的表格，上面两种方法都能解决这个批量操作的问题。

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