基本上我有一个带有 3 层展开/折叠功能的 html 表。我想要实现的是让这些层实际上在父母下方而不是向右扩展/折叠，基本上一旦它们被扩展，它们就会变成一个向下的斜坡。这是我的JSFiddle：
https://jsfiddle.net/htfLmekL/1/
//expand collapse based on parent class which is column 1
$(document).ready(function() {
$('.parent').prepend('-');
$('.parent').on('click', function() {
if ($(this).text().indexOf('-') != -1) {
var str0 = $(this).text().replace(/-/g, '+');
$(this).text(str0);
} else {
var str = $(this).text().replace(/+/g, '-');
$(this).text(str);
}
var $row = $(this).parent();
var rowspan = +$(this).attr('rowspan') || 4;
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.alliance').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.race').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.role').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.resource').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.weapon').toggle();
$.merge($row, $row.nextAll()).slice(0, rowspan).find('.price').toggle();
});
});
创建了这样的东西...尽管您必须对CSS进行大量调整才能使其完美。 希望这有帮助...
<style>
.tftable {
font-size: 12px;
color: #333333;
width: 100%;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #acc8cc;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
text-align: left;
}
.tftable tr {
background-color: #d4e3e5;
}
.tftable td {
font-size: 12px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
}
.tftable tr:hover {
background-color: #ffffff;
}
.race {
width: 50px;
}
</style>
</head>
<body>
<table class="tftable" border="1">
<tr>
<th>Group</th>
</tr>
<tr>
<th><a onclick="javascript:toggleDiv(this,'grp1child1');"> - </a>Group 1
<table id="grp1child1" class="tftable" border="1">
<tr>
<th>Alliance : <a onclick="javascript:toggleDiv(this,'grp1child2');"> - </a>Good</th>
</tr>
<tr>
<td >
<table id="grp1child2" class="tftable" border="1">
<tr>
<th class="race">Race: </th>
<th><a onclick="javascript:toggleDiv(this,'grp1child3');" > - </a>Humans</th>
<th><a onclick="javascript:toggleDiv(this,'grp1child4');"> - </a>Elves</th>
</tr>
<tr>
<td> </td>
<td>
<table id="grp1child3" class="tftable" border="1">
<tr>
<th colspan="3"> </th>
<th>Price</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table id="grp1child4" class="tftable" border="1">
<tr>
<th colspan="3"> </th>
<th>Price</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
<tr>
<th><a onclick="javascript:toggleDiv(this,'grp2child1');"> - </a>Group 2
<table id="grp2child1" class="tftable" border="1">
<tr>
<th >Alliance : <a onclick="javascript:toggleDiv(this,'grp2child2');"> - </a>Evil</th>
</tr>
<tr>
<td>
<table id="grp2child2" style="width : 100%">
<tr>
<th class="race">Race: </th>
<th><a onclick="javascript:toggleDiv(this,'grp2child3');" > - </a>Trolls</th>
<th><a onclick="javascript:toggleDiv(this,'grp2child4');"> - </a>Ogres</th>
</tr>
<tr>
<td> </td>
<td>
<table id="grp2child3" class="tftable" border="1">
<tr>
<th colspan="3"> </th>
<th>Price</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
<td>
<table id="grp2child4" class="tftable" border="1">
<tr>
<th colspan="3"> </th>
<th>Price</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
</tr>
</table>
<script>
function toggleDiv(linkobj,divId) {
linkobj.innerHTML = (linkobj.innerHTML === ' - ') ? ' + ' : ' - ' ;
$("#"+divId).toggle();
}
</script>