javascript - 单击按钮显示/隐藏元素

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();
});