我在下面发布了一个代码。问题是当我使用 bootstrap 版本 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>
最佳答案
为您的样式指定 !important 标签，这样它就不会被覆盖:
<style>
.level1 td:first-child {
padding-left: 10px!important;
}
.level2 td:first-child {
padding-left: 20px!important;
}
.collapse .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/collapse.gif")!important;
}
.expand .toggle {
background: url("http://mleibman.github.com/SlickGrid/images/expand.gif")!important;
}
.toggle {
height: 9px!important;
width: 9px!important;
display: inline-block!important;
}
关于javascript - 如何适应不同 bootstrap css 文件之间的变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58639469/