Question

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

以下是 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引导程序适用于<td>。

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

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

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

Updated JsFiddle

Answer 2

因为您隐藏<div>内的<td>，而不隐藏<td> s。

Answer 3

符合您需求的解决方案只是添加一个名为“td-padding”的类，并像切换幻灯片一样切换它$('tr[class^=child-]').toggleClass(".td-padding");

您还必须删除填充声明 .table th, .table td { padding: 5px; } 你有。 JsFiddle：http://jsfiddle.net/Papibarozza/0Lh5ozyb/46/

剩余的填充内置于HTML元素本身（在chrome devtools中的代理用户样式表中称为边距）。

这导致了我想要做的下一点。你确定你真的需要用table和tablecells实现它吗？我建议您使用列表，因为UL中的UL具有逻辑子父关系。很多编码都会将其与众多类名和复杂性区分开来。使用UL＆gt; UL关系，您只需在单击的元素上调用$(".parent").children()即可。填充物可以完全定制，然后也是。

Answer 4

试试这个http://jsfiddle.net/0Lh5ozyb/56/

Bootstrap正在强制填充，而且你正在隐藏div而不是具有td的{{1}}元素

＆＃13;

padding

＆＃13;

$('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().css({});

＆＃13;

td {padding:0px!important;}
td div{padding:5px}

＆＃13;

Answer 5

将类添加到父行并删除其td的填充。

http://jsfiddle.net/afelixj/0Lh5ozyb/59/

$children.find('td > div').slideToggle().parents('tr').toggleClass('open');

使用SlideToogle删除填充

5 个答案: