jQuery点击主列表项无法展开对应隐藏表格子内容问题求助

现有代码的核心问题 #

• 缺失<table>根标签：所有<tr>元素必须包裹在<table>标签内才能被浏览器正常解析，结构错误会导致元素选择、事件绑定全部失效。
• 未引入jQuery依赖：代码使用了jQuery语法，若页面没有提前引入jQuery库，$变量未定义会直接导致脚本执行失败。
• 获取的主项文本携带多余空白：调用$(this).text()得到的内容可能包含前后空格、换行符，拼接出的类选择器无法匹配到对应的子项元素。
• table元素的display属性设置错误：table元素默认的display值为table，强制设置为block会破坏表格原有布局，即使触发显示也会出现样式异常。

修复后的完整代码 #

<style> 
.show-kids {display:none;} 
/* 加手型光标提示元素可点击 */
.main-group {cursor: pointer;}
</style>

<!-- 补充table根标签包裹所有tr元素 -->
<table>
  <tr>
   <td class="main-group">123</td>
  </tr>  
  <tr>
   <td>
    <table class="show-kids kids-123">
     <tr><td>123.111</td></tr>
     <tr><td>123.222</td></tr>
     <tr><td>123.333</td></tr>
    </table>
   </td>
  </tr>
</table>

<!-- 引入jQuery依赖，若页面已引入可删除本行 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $('.main-group').click(function(e) {  
    // 去除文本前后的空白字符
    var text = $(this).text().trim();
    // toggle方法自动切换显隐状态，会自动适配元素的默认display属性
    $(".kids-"+text).toggle();
  });
</script>

如果不需要切换显隐、只需要单次点击展开，把toggle()替换为show()即可。

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