Javascript 引导表行详细信息-ajax数据

Im通过以id为参数的Ajax调用在引导表中加载行详细信息。
此详细信息使用图示符图标按钮显示在可折叠行中

但是，单击“上一步”按钮折叠行最终会扭曲显示。
虽然代码似乎正确，但我一直在努力寻找解决方案。
愿你能找到我的钥匙

var parentsData={
“成功”：没错，
“父母”：[{
“id”：1531，
“名字”：“奥斯汀”，
“姓氏”：“Ana\u00eblle”，
“学校ID”：“046039”，
“学名”：“ARCAMBAL”，
“公社”：“阿坎巴尔”
}, {
“id”：2032年，
“名字”：“拉莫斯”，
“姓氏”：“L\u00e8i”，
“学校ID”：“046043”，
“学校名称”：“J CALVET”，
“公社”：“卡奥尔”
}, {
“id”：3036，
“名字”：“贝克”，
“姓氏”：“Salom\u00e9”，
“学校ID”：“046043”，
“学校名称”：“Z拉法格”，
“公社”：“卡奥尔”
}, {
“id”：1724，
“Firstname”：“Berry”，
“姓氏”：“泥灰岩\u00e8ne”，
“学校ID”：“046044”，
“学校名称”：“J CALVET”，
“公社”：“卡奥尔”
}]
};
var$table=$（'.js table'）；
$table.find（'.js view parents'）。在（'click'，函数（e）上{
e、 预防默认值（）；
if（！$（this.closest（'tr'）.next（'tr'）.hasClass（'expand-child'））{
$（e.target）.toggleClass（'glypicon-eye-close-glypicon-eye-open'）；
$（“.expand child”）.slideUp（）；
var$this=$（this）.closest（'tr'）；
var rowId=$（this.data（'id'）；
变量newRow='+''+
'' +
'' +
'' +
“姓”+
“名字”+
“学校Id”+
“学校名称”+
'' +
'' +
'';
$.ajax({
url:“/echo/json/”，
数据类型：“json”，
资料来源：parentsData，
成功：功能（parentsData）{
如果（家长数据、家长）{
var parents=parentsData.parents；
$。每个（父级，函数（i，父级）{
新行=新行+“”+
''+父级。名+''的+
''+父母姓氏''+
''+parent.schoolId+''的+
''+parent.schoolName+''+parent.commune+
'' +
'';
});
新行=新行+“”；
}
$（newRow）.insertAfter（$this）；
}
});
}否则{
$（this）.closest（'tr'）.slideToggle（）；
var$detailRow=$（this.closest（'tr'）.next（'tr'）.hasClass（'expand-child'）；
$detailRow.style.visibility.toggle（'table-row collapse'）；
$（e.target）.toggleClass（'glypicon-eye-close-glypicon-eye-open'）；
}
});

训练
标题
日期
结束日期
描述
申请人须知
行动
纳提克行动
nautiques活动-2016年10月16日
2016年10月16日
2016年10月13日
病毒性肝炎后遗症
15
纳提克行动
nautiques活动-2016年10月24日
2016年10月24日
2016年10月21日
重度子痫前期，妊娠晚期
0
纳提克行动
nautiques活动-2016年10月29日
2016年10月29日
2016年10月26日
其他继发性慢性痛风
0
您的
else
块中有几处错误。首先,

$(this).closest('tr').slideToggle();

将向上滑动父行，这不是您想要的-您想要隐藏子行

 var $detailRow = $(this).closest('tr').next('tr').hasClass('expand-child');

hasClass（）
将返回一个布尔值，您不能使用它来筛选jQuery集合。您要做的是选择下一个具有类
的
。展开child
，如下所示：

var $detailRow = $(this).closest('tr').next('tr.expand-child');

下一行毫无意义

$detailRow.style.visibility.toggle('table-row collapse');

我想您应该切换该行的类：

$detailRow.toggleClass('table-row collapse');

这些更改将使第一次显示/隐藏起作用。但是，
if
块中也有一个问题：

$(".expand-child").slideUp();

这将选择类为
的所有元素。在DOM中展开child
。但您可能只希望选择当前父行的子行。
但是，我不会为您调试整个代码。我想，我已经把一些主要问题讲清楚了（请看这个更新的提琴：），希望你自己能从这里继续下去

还有一个技巧：为了提高性能，将多次使用的jQuery集合存储在变量中，而不是在每次需要时查询它们。例如，您已经使用
$detailRow
和
$this=…
完成了这项操作，但是没有使用它。为什么不在click事件处理程序的开头选择并声明所有需要的dom元素，然后在任何地方使用它们呢？除了性能因素外，它还使代码更清晰、更容易理解（对您和其他人来说），并且更容易发现逻辑中的任何错误。
主要问题是您附加了错误元素上的折叠ID。它应该附加到
tr.expand-child
元素，而不是
.expand-child td
元素

只有在得到AJAX响应后，我才会完整地构建
.expand child
行

缓存将要重复使用的元素是一个好习惯

下面是我将如何修改您的代码：

var $table = $('.js-table');

$table.find('.js-view-parents').on('click', function(e) {
    e.preventDefault();
    // cache elements
    var $btn = $(e.target), $row = $btn.closest('tr'),
        // find next immediate .expand-child
        $nextRow = $row.next('tr.expand-child'); 
    // toggle button
    $btn.toggleClass('glyphicon-eye-close glyphicon-eye-open');
    // if .expand-child row exist already, toggle
    if ($nextRow.length) {
        // show or hide .expand-child row if eye button is open or not, respectively
        $nextRow.toggle($btn.hasClass('glyphicon-eye-open'));
    // if not, create .expand-child row
    } else {
        $.ajax({
            url: '/echo/json/',
            dataType: "json",
            data: parentsData,
            success: function (parentsData) {
                var newRow = '<tr class="expand-child" id="collapse' + $btn.data('id') + '">' +
                    '<td colspan="12">' +
                    '<table class="table table-condensed table-bordered" width=100% >' +
                    '<thead>' +
                    '<tr>' +
                    '<th>Surname</th>' +
                    '<th>FirstName</th>' +
                    '<th>School Id</th>' +
                    '<th>School name</th>' +
                    '</tr>' +
                    '</thead>' +
                    '<tbody>';
                if (parentsData.parents) {
                    $.each(parentsData.parents, function(i, parent) {
                        newRow += '<tr>' +
                        '<td>' + parent.Firstname + '</td>' +
                        '<td>' + parent.Surname + '</td>' +
                        '<td>' + parent.schoolId + '</td>' +
                        '<td>' + parent.schoolName + ' ' + parent.commune + '</td>' +
                        '</tr>';
                    });
                }
                newRow += '</tbody></table></td></tr>';
                $row.after(newRow);
            }
        });
    }
});

var$table=$（'.jstable'）；
$table.find（'.js view parents'）。在（'click'，函数（e）上{
e、 预防默认值（）；
//缓存元素
变量$btn=$（e.target），$row=$btn.nexist（'tr'），
//查找下一个直接项。展开子项
$nextRow=$row.next（'tr.expand-child'）；
//切换按钮
$btn.toggleClass（'glyphicon-eye-c