0
我正在尝试做手风琴表行。 我想展开/折叠按钮点击表格行。 （加（+）按钮展开该行并减去（ - ）按钮以折叠该行）手风琴表行和刷新页面后不变的表行
它应该以与标题相同的方式工作。 默认情况下，最初在所有行打开的页面折叠并且 在刷新页面后保持表格的当前条件不变。
这是我真正想要做的图像： Output Image
下面是代码
CSS：
table, tr, td, th
{
border: 1px solid black;
border-collapse:collapse;
}
HTML：
<table border="0">
<thead>
<tr>
<th>Large<a class="LargeToggleAll" href="#">+</a></th>
<th>Medium<a class="MediumToggleAll" href="#">+</a></th>
<th>Small</th>
</tr>
</thead>
<tr id="test1" class="pa-dt-master-account-level"
data-account-level="master">
<td>
<a class="pa-dt-toggle toggleLarge" href="#">+</a>
Test1
</td>
<td></td>
<td></td>
</tr>
<tbody data-owner="test1">
<!-- GROUP ACCOUNT -->
<tr id="test1-1" class="pa-dt-group-account-level"
data-owner="test1" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-1</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-1-1" class="pa-dt-account-level" data-owner="test1-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-1-1</td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-1-2" class="pa-dt-account-level" data-owner="test1-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-1-2</td>
</tr>
</tbody>
<tbody data-owner="test1">
<!-- GROUP ACCOUNT -->
<tr id="test1-2" class="pa-dt-group-account-level"
data-owner="test1" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test1-2</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test1">
<tr id="test1-2-1" class="pa-dt-account-level" data-owner="test1-2"
data-account-level="account">
<td></td>
<td></td>
<td>Test1-2-1</td>
</tr>
</tbody>
<tr id="test2" class="pa-dt-master-account-level"
data-account-level="master">
<td>
<a class="pa-dt-toggle toggleLarge" href="#">+</a>
Test2
</td>
<td></td>
<td></td>
</tr>
<tbody data-owner="test2">
<!-- GROUP ACCOUNT -->
<tr id="test2-1" class="pa-dt-group-account-level"
data-owner="test2" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-1</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-1-1" class="pa-dt-account-level" data-owner="test2-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-1-1</td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-1-2" class="pa-dt-account-level" data-owner="test2-1"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-1-2</td>
</tr>
</tbody>
<tbody data-owner="test2">
<!-- GROUP ACCOUNT -->
<tr id="test2-2" class="pa-dt-group-account-level"
data-owner="test2" data-account-level="group">
<td></td>
<td><a class="pa-dt-toggle toggleMedium" href="#">+</a>Test2-2</td>
<td></td>
</tr>
</tbody>
<tbody data-owner="test2">
<tr id="test2-2-1" class="pa-dt-account-level" data-owner="test2-2"
data-account-level="account">
<td></td>
<td></td>
<td>Test2-2-1</td>
</tr>
</tbody>
</table>
的javascript：
$(function() {
// Hide all group and account level
$('.pa-dt-group-account-level').hide();
$('.pa-dt-account-level').hide();
// Define our button for toggling
var button = $("a.pa-dt-toggle");
button.click(function() {
// get the parent ID
var parentId = $(this).parents('tr').attr("id");
// get the parent account level
var accountType = $(this).parents('tr').attr("data-account-level");
console.log(parentId);
console.log(accountType);
$(this).text($(this).text() == '+' ? '-' : '+');
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-owner="' + parentId +'"]').hide();
} else {
$(this).addClass('pa-dt-toggle-active');
$('[data-owner="' + parentId +'"]').show();
}
});
button.click(function(e){
e.stopPropagation();
});
$('.LargeToggleAll').click(function() {
$(this).text($(this).text() == '+' ? '-' : '+');
$(".toggleLarge").each(function(){
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-account-level="group"]').hide();
$('[data-account-level="account"]').hide();
$(this).text("+");
$(".MediumToggleAll").text("+");
} else {
$(this).addClass('pa-dt-toggle-active');
$('[data-account-level="group"]').show();
$(this).text("-");
}
})
});
$('.MediumToggleAll').click(function() {
$(this).text($(this).text() == '+' ? '-' : '+');
$(".toggleMedium").each(function(){
if ($(this).hasClass("pa-dt-toggle-active")) {
$(this).removeClass('pa-dt-toggle-active');
$('[data-account-level="account"]').hide();
$(".toggleMedium").text("+");
} else {
$(this).addClass('pa-dt-toggle-active');
$('.MediumToggleAll').addClass('pa-dt-toggle-active');
$('[data-account-level="group"]').show();
$('[data-account-level="account"]').show();
$(".toggleLarge").text("-");
$(".toggleMedium").text("-");
$(".LargeToggleAll").text("-");
}
})
});
});
https://jsfiddle.net/y4Mdy/2494/然而，它似乎没有按预期工作。 我希望任何人都可以帮助我。
不使用表。尝试使用定位，填充，边距... – TricksfortheWeb
同意@TricksfortheWeb –