Xóa Padding bằng SlideToogle

Question

Tôi có một số mã mở rộng các hàng. Bảng có padding cho mỗi td. Đó là tốt nhưng bảng khi sụp đổ vẫn cho thấy đệm này,

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

Dưới đây là 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(); 

Dưới đây là 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> 

là gì cách tốt nhất để đảm bảo rằng phần đệm được loại bỏ khi các hàng được thu gọn.

Answer 1

Vâng, tôi Are hidding của bạn chắc chắn bạn đã tìm ra rằng vấn đề là padding mà bootstrap là appliyng để <td>.

Mặt khác, nếu bạn chuyển trang trình bày trên <td>, nó sẽ trở nên lạ vì nó không che giấu luồng của div.

Một sửa chữa dễ dàng cho điều đó là để chuyển đổi tất cả (td và div), đồng thời:

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

Updated JsFiddle

Answer 2

Vì bạn ẩn <div> s bên trong số <td> s, chứ không phải chính mình là <td>.

Answer 3

Các giải pháp phù hợp với nhu cầu của bạn chỉ đơn giản là thêm một lớp được gọi là "td-đệm" và chuyển nó giống như bạn chuyển đổi các slide $('tr[class^=child-]').toggleClass(".td-padding");

Bạn cũng phải loại bỏ các tuyên bố đệm .table th, .table td { padding: 5px; } mà bạn đã có. JsFiddle: http://jsfiddle.net/Papibarozza/0Lh5ozyb/46/

Phần đệm còn lại được tích hợp vào chính phần tử HTML (được gọi là khoảng cách đường viền trong biểu định kiểu người dùng đại lý trong chrome devtools).

Điều này dẫn đến điểm tiếp theo tôi muốn thực hiện. Bạn có chắc bạn thực sự cần phải thực hiện điều này với một bảng và tablecells? Tôi muốn đề nghị bạn sử dụng một danh sách thay vì từ và UL trong một UL có một mối quan hệ cha-con logic. Rất nhiều mã của bạn đi để phân biệt này, với rất nhiều tên lớp và độ phức tạp như là một kết quả. Với mối quan hệ UL> UL bạn chỉ có thể gọi $(".parent").children() trên phần tử được nhấp. Các padding có thể được hoàn toàn tùy chỉnh sau đó là tốt.

Answer 4

thử này http://jsfiddle.net/0Lh5ozyb/56/

Bootstrap được buộc đệm cộng của div không phải là yếu tố td trong đó có các padding

---

$('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>

Answer 5

Thêm lớp để hàng phụ huynh và loại bỏ các đệm cho td của nó.

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

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