顯示/隱藏元素點擊

Question

我得到了表是這樣的：

<tr> 
    <td class="title">Title</td> 
    <td class="body">Body</td> 
    <td class="any">Any text</td> 
</tr> 
<tr> 
    <td class="title">Title</td> 
    <td class="body">Body</td> 
    <td class="any">Any text</td> 
</tr> 
<tr> 
    <td class="title">Title</td> 
    <td class="body">Body</td> 
    <td class="any">Any text</td> 
</tr> 

我使用這個腳本來隱藏/顯示TD =「身體」

$('.title').append("<button class='moredrop'>&darr;</button>"); 
$(".moredrop").click(function(){ 
    $(".body").toggle(); 

它顯示和隱藏所有td在桌子上。我想要它隱藏/只顯示此td像這裏：

 $("tr").toggle(
    function(){$(".body",this).css("display","block");}, 
    function(){$(".body",this).css("display","none");}); 

但在按鈕單擊。有任何想法嗎？ THX

Answer 1

搜索包含TR，然後去到具體的。體

$('.moredrop').on('click', function() { 
    $(this).closest('tr').find('.body').toggle(); 
}); 

Answer 2

$('.moredrop').click(function(){ 
    $('td.body').toggle(); 
}); 

Answer 3

試試這個：

$(document).ready(function(){ 
    $('.title').append("<button class='moredrop'>&darr;</button>"); 
    $('tr').on('click','.moredrop',function(){ 
      $(this).parents('tr').children('.body').toggle(); 
    }); 
}); 

這裏是工作demo。