我以HTML
表和jQuery
脚本为例,我正在尝试更改此组合的行为。当前表行已扩展并在click
上崩溃。如何更改将其折叠并在click
上展开。
$('.header').click(function() {
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
tr.header {
cursor: pointer;
}
.header .sign:after {
content: "+";
display: inline-block;
}
.header.expand .sign:after {
content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
<tr class="header expand">
<th colspan="2">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header expand">
<th colspan="2">Header <span class="sign"></span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>
小提琴
要逆转默认状态,您只需要从.header
元素中删除expand
类,然后在标准tr
元素上设置display: none
。JS逻辑是相同的。
tr.header {
cursor: pointer;
display: table-row;
}
tr {
display: none;
}
更新了小提琴
为了崩溃以扩展行为,最初隐藏行:
$('.header').nextUntil('tr.header').hide();
$('.header').nextUntil('tr.header').hide();
$('.header').click(function() {
$(this).toggleClass('expand').nextUntil('tr.header').slideToggle(100);
});
table,
tr,
td,
th {
border: 1px solid black;
border-collapse: collapse;
}
tr.header {
cursor: pointer;
}
.header .sign:after {
content: "+";
display: inline-block;
}
.header.expand .sign:after {
content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="0">
<tr class="header expand">
<th colspan="2">Header <span class="sign"></span></th>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr class="header expand">
<th colspan="2">Header <span class="sign"></span></th>
</tr>
<tr>
<td>date</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
</tr>
</table>