显示/隐藏元素点击

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。