css - 使用 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

好吧，我相信您已经发现问题出在 padding该 Bootstrap 适用于 <td> .

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

一个简单的解决方法是同时切换(td 和 div):

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

Updated JsFiddle