如何修改tablesorter嵌套表格的toggle功能，使主行切换仅展开嵌套表首行

问题原因 #

你原来的写法没有区分不同层级的toggle触发范围，点击主行toggle时选择器会命中嵌套表格内所有带.show类的元素，导致嵌套表所有行一起被切换。

实现步骤 #

• 给不同层级的toggle按钮添加区分类：主行toggle加parent-toggle，嵌套表格内的toggle加nested-toggle，避免事件互相干扰
• 调整初始化隐藏逻辑，只隐藏需要默认收起的元素，不要全局隐藏所有子行td
• 分开写两类toggle的点击事件，严格控制各自的作用范围

修改后可运行代码 #

$(function() {
  // 初始化隐藏：1. 主行对应的所有子行 2. 嵌套表格内除第一行外的所有行
  $('.tablesorter-childRow').hide();
  // 假设你的嵌套表格加了类inner-table，按需替换成你实际的嵌套表类名
  $('.inner-table tr:not(:first-child)').hide();

  $(".tablesorter").tablesorter({
    cssChildRow: "tablesorter-childRow"
  });

  // 主行toggle点击事件：仅切换主行对应的子行（嵌套表格外层容器行）的显示/隐藏，不碰嵌套表内部状态
  $('.tablesorter').on('click', '.parent-toggle', function() {
    $(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').toggle();
    return false;
  });

  // 嵌套表toggle点击事件：仅切换当前嵌套表内除第一行外的其他行
  $('.tablesorter').on('click', '.nested-toggle', function() {
    $(this).closest('table').find('tr:not(:first-child)').toggle();
    return false;
  });
});

补充说明 #

如果你的嵌套表格没有单独加类名，也可以通过层级选择器限定范围，只要保证主行toggle的事件不向下穿透到嵌套表内部即可，就能实现点击主行只展示嵌套表的第一行，嵌套表内部其他行保持原有的隐藏状态。

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