我正在尝试隐藏所属的行。例如,如果您单击“子标题1”,它将隐藏第1项,第2项和第3项行。
示例:
<table border="1">
<tbody>
<tr class="head">
<td> title </td>
</tr>
<tr class="sub-title">
<td>Sub Title 1</td>
</tr>
<tr> <td>Item 1</td> </tr>
<tr> <td>Item 2</td> </tr>
<tr> <td>Item 3</td> </tr>
<tr class="sub-title">
<td>Sub Title 2</td>
</tr>
<tr> <td>Item 4</td> </tr>
<tr> <td>Item 5</td> </tr>
<tr> <td>Item 6</td> </tr>
</tbody>
</table>
-
$('.sub-title').click( function() {
$(this).parent().nextUntil('.sub-title').toggle();
})
它似乎不起作用......
答案 0 :(得分:1)
您必须手动切换:
$(".sub-title").on("click",function() {
$(this).nextUntil(".sub-title").each(function() {
this.style.display = this.style.display == "none" ? "" : "none";
});
});
答案 1 :(得分:1)
nextUntil选择兄弟姐妹,而不是孩子。从通话中删除“父母”。
编辑以回答有关基于类排除某些行的进一步问题。显然,您也可以接受Kolink关于防止切换的“display:block”覆盖默认“display:table-row”的响应,但只要您在所有支持的浏览器中进行测试,我就不会发现使用切换有任何问题。
$('.sub-title').click( function() {
$(this).nextUntil('.sub-title').each(function() {
if (!$(this).hasClass('order'))
$(this).toggle();
});
});