去除SlideToggle的填充效果

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>

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

- felix001

Answer 1

好的，我相信您已经发现问题出在Bootstrap应用于<td>的padding上。

另一方面，如果您切换<td>上的滑块，它会变得奇怪，因为它不会隐藏div的溢出部分。

解决方法很简单，同时切换和

:

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

Updated JsFiddle

- LcSalazar

Answer 2

因为您隐藏了

标签在标签内部，而不是隐藏标签本身。

- Mave

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开发工具中称为代理用户样式表中的边框间距）。

这引出了我想要提出的下一个观点。您确定您真的需要使用表格和单元格来实现这个吗？我建议您改用列表，因为UL与UL之间有逻辑上的父子关系。您的大量编码都用于区分这一点，结果产生了许多类名和复杂性。使用UL>UL关系，您只需在单击的元素上调用$(".parent").children()即可。然后可以完全自定义填充。

- Papibarozza

---

谢谢，但是带填充的示例是基于Bootstrap表格样式的。我已经更新了JSFiddle。 - felix001

Answer 4

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

Bootstrap 强制添加了 padding，而且你隐藏的是 div 而不是具有 padding 的 td 元素。

---

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

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

<table class="table">
    <tr class="" id="">
        <td><div>People TEST</div></td>
        <td><div>Click to Expand TEST</div></td>
        <td><div>N/A TEST</div></td>
    </tr>
    <tr class="" id="">
        <td><div>People TEST</div></td>
        <td><div>Click to Expand TEST</div></td>
        <td><div>N/A TEST</div></td>
    </tr>
    <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>

- user4563161

Answer 5

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

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

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

的翻译如下：

- Felix A J