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

Answer 2

试试这个 ：

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

这是工作演示。

Answer 3

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