JQuery展開和隱藏表td

Question

我設法使錶行擴展和隱藏，但是當我添加另一行時，就像所有行一起摺疊。

你的幫助真的很感謝。

JS

$('#more').on('click',function(event){ 
    $(this).closest('tr').nextAll('.hidden-row').toggle(); 
}); 

這裏是DEMO

Answer 1

不要使用nextAll()，只需使用next()。

也不應該在HTML文檔中重複ID，所以用類替換所有moreID。

請參閱JSFiddle瞭解更新代碼的外觀。

JSFiddle

Answer 2

您正在使用nexAll()它選擇它旁邊的所有.hidden-row兄弟姐妹，爲了得到眼前的下一個兄弟使用next()代替。你也使用相同的id td，它應該是唯一的，所以只有選中第一個元素。對於一組元素，始終使用class。

$('.more').on('click', function(event) { 
 
    $(this).closest('tr').next().toggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td><a class="more" href="#">section</a> 
 
    </td> 
 
    </tr> 
 
    <tr class="hidden-row"> 
 
    <td colspan="10">Hahaha</td> 
 
    </tr> 
 
    <tr> 
 
    <td><a class="more" href="#">more</a> 
 
    </td> 
 
    </tr> 
 
    <tr class="hidden-row"> 
 
    <td colspan="10">Hahaha</td> 
 
    </tr> 
 
</table>