jquery - jQuery slideToggle 在桌子上

Question

<table id="main_table">     
        <tr style="background-color:green; color:white">
            <td class="flip"> Section 1 </td>
        </tr> 
    <tr>
        <td>
            <table class="section">
                <tr>
                    <td>item 111</td>
                    <td>item 112</td>
                    <td>item 113</td>
                    <td>item 114</td>
                </tr> 
            </table>
        </td>
    </tr>   
</table>

$('.flip').click(function() {
    $(this)
        .closest('table')
        .next('.section')
        .toggle('fast');
});

有人可以帮我更正上面的代码吗？我试过slidetoggle，但不知道为什么它不起作用

谢谢

Answer 1

您可以使用tr代替table来获取下一行并使用find()来获取.section

$('.flip').click(function() {
    $(this)
        .closest('tr')
        .next('tr')
        .find('.section')
        .toggle('fast');
});

Answer 2

尝试这个

$('.flip').on('click',function() {
 $(this)
 .closest('tr').next('tr')
 .find('.section')
 .toggle(200);
});

参考

Answer 3

该section元素是下一个元素的子tr元素

$('.flip').click(function() {
    $(this)
        .closest('tr').next()
        .find('.section')
        .toggle('fast');
});

演示：小提琴