你的代码里有两个核心问题导致子行无法在页面加载时保持隐藏，我帮你梳理并修正了逻辑：

问题根源 #

1. 初始状态下没有给父行 .freasontr 添加 collapsed 类，导致第一次点击时逻辑分支判断错误
2. 子行的初始隐藏处理和后续展开/收起的DOM操作没有对齐，容易出现显示异常

修改后的完整代码 #

$(document).ready(function(){ 
  // 1. 页面加载时先隐藏所有子行
  $('.childtr').hide(); 
  // 2. 给所有父行添加collapsed类，标记初始为收起状态
  $('.freasontr').addClass("collapsed");
}); 

$('.freasontr').click(function(){ 
  if($(this).hasClass("collapsed")){ 
    // 展开逻辑：显示子行并移除包裹的div，还原原始内容
    $(this).nextUntil('tr.freasontr')
      .show() // 先让子行本身可见
      .find('td > div')
      .slideDown("fast", function(){ 
        var set = $(this); 
        set.replaceWith(set.contents()); 
      });
    $(this).removeClass("collapsed"); 
  } else { 
    // 收起逻辑：用div包裹内容后滑动隐藏，完成后再隐藏子行
    $(this).nextUntil('tr.freasontr')
      .find('td')
      .wrapInner('<div style="display: block;" />')
      .parent()
      .find('td > div')
      .slideUp("fast", function(){
        $(this).closest('.childtr').hide(); // 动画结束后隐藏子行
      }); 
    $(this).addClass("collapsed"); 
  } 
}); 

关键修改说明 #

• 初始状态标记：给 .freasontr 初始添加 collapsed 类，让点击逻辑一开始就能正确识别当前是收起状态，触发正确的展开操作
• 子行显示/隐藏对齐：展开时先让子行本身可见，收起时在滑动动画完成后再隐藏子行，避免DOM操作后子行意外显示
• 简化DOM遍历：调整了选择器逻辑，用closest('.childtr')更精准地定位子行，减少不必要的层级遍历

这样修改后，页面加载时所有子行会保持隐藏，点击父行时能正常触发展开/收起动画，逻辑也更稳定清晰。

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