单击按钮时显示/隐藏元素

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 =“body”

$('.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");});

但点击按钮。有任何想法吗？

Answer 1

搜索包含的TR，然后转到特定的.body

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

Answer 2

试试这个：

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

这是工作demo。

Answer 3

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