使用jQuery实现点击切换表格单元格内部分内容的显示与隐藏

• 类选择器语法错误：jQuery代码中查找.complete元素时漏写了类选择器的.前缀，写为'complete'无法匹配到对应类名的元素。
• 查找元素的方法错误：closest()方法用于查找当前元素的祖先节点，而.complete元素和点击触发的<i>是同级兄弟节点，用closest()永远找不到目标元素。
• 交互逻辑不完整：仅调用show()只能实现显示效果，无法支持二次点击隐藏的切换需求。
• 冗余CSS规则：现有CSS中关于.test2的规则和当前要实现的单元格内文本显隐需求无关，可以移除。

CSS代码 #

.test {
  cursor: pointer;
}
.complete{
    display:none;
}

JS/jQuery代码 #

$('table').on('click', 'tr.test .fa-chevron-down', function() {
    // 查找当前点击元素同级的.complete元素，切换显隐状态
    $(this).siblings('.complete').toggle();
    // 如果你原本还有控制其他.test2行显隐的需求，可以保留下方代码，否则可以删除
    // $(this).closest('tbody').toggleClass('open');
});

HTML代码无需修改，替换上述CSS和JS代码即可实现点击指定区域切换隐藏文本显隐的效果。

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