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

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

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

演示：Fiddle

Answer 3

试试这个

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

Reference

jQuery slideToggle在桌子上

3 个答案: