使用SlideToogle删除填充

Question

我有一些扩展行的代码.该表有每个td的填充.哪个没问题,但折叠后的表格仍显示此填充,

http://jsfiddle.net/0Lh5ozyb/55/

下面是jquery

$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {


        var $children = $(this).nextUntil( $('tr').not('[class^=child-]') );
        $children.find('td > div').slideToggle();
});

$('tr[class^=child-]').find('td > div').hide();

下面是HTML

<table class="table">
    <tr class="parent" id="row1">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row1-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row1-2">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent" id="row2">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row2-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row2-1">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
    <tr class="parent" id="row3">
        <td><div>People</div></td>
        <td><div>Click to Expand</div></td>
        <td><div>N/A</div></td>
    </tr>
    <tr class="child-row3-1">
        <td><div>Eve</div></td>
        <td><div>Jackson</div></td>
        <td><div>94</div></td>
    </tr>
    <tr class="child-row3-2">
        <td><div>John</div></td>
        <td><div>Doe</div></td>
        <td><div>80</div></td>
    </tr>
</table>

确保在折叠行时删除填充的最佳方法是什么.

Answer 1

好吧，我确信您已经发现问题是paddingbootstrap 应用于<td>.

另一方面，如果您切换 上的幻灯片<td>，则会变得很奇怪，因为它不会隐藏 div 的溢出。

一个简单的解决方法是同时切换两者（td 和 div）：

$children.find('td > div, td').slideToggle();

更新了 JsFiddle