У меня есть код, который я публикую ниже. Проблема заключается в том, что функция свертывания переключателя работает, когда я использую загрузочную версию 3.3.5, и не работает с 4.1.3 или более поздними версиями. Дело в том, что мне нужно использовать 4.1.3 и я хотел бы также сохранить возможность переключения. Я считаю, что решение должно быть тривиальным. Как я могу использовать это?
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.level1 td:first-child {
padding-left: 10px;
}
.level2 td:first-child {
padding-left: 20px;
}
.collapse .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif");
}
.expand .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/expand.gif");
}
.toggle {
height: 9px;
width: 9px;
display: inline-block;
}
</style>
<form method="post" id="iddetailForm" name="detailForm" enctype="multipart/form-data">
<table width="900" id="mytable">
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr data-depth="0" class="collapse level0" bgcolor="#45ADF7">
<td><span class="toggle collapse"></span> Names</td>
<td>500</td>
<td>500</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#93CEF7">
<td><span class="toggle"></span> name1</td>
<td>300</td>
<td>300</td>
</tr>
<tr data-depth="1" class="collapse level1" bgcolor="#93CEF7">
<td><span class="toggle"></span> name2</td>
<td>200</td>
<td>200</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(function() {
$('#mytable').on('click', '.toggle', function () {
var findChildren = function (tr) {
var depth = tr.data('depth');
return tr.nextUntil($('tr').filter(function () {
return $(this).data('depth') <= depth;
}));
};
var el = $(this);
var tr = el.closest('tr'); //Get <tr> parent of toggle button
var children = findChildren(tr);
var subnodes = children.filter('.expand');
subnodes.each(function () {
var subnode = $(this);
var subnodeChildren = findChildren(subnode);
children = children.not(subnodeChildren);
});
//Change icon and hide/show children
if (tr.hasClass('collapse')) {
tr.removeClass('collapse').addClass('expand');
children.hide();
} else {
tr.removeClass('expand').addClass('collapse');
children.show();
}
return children;
});
$('.toggle').click();
});
</script>
</html>