Rimuovi padding con SlideToogle

Question

Ho un codice che espande le righe. Il tavolo ha padding per ogni td. Il che va bene, ma il tavolo quando è crollato ancora mostra questa imbottitura,

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

riportano di seguito le 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(); 

Di seguito il 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> 

Che cosa è il modo migliore per assicurarti che il padding sia rimosso quando le file sono crollati.

Answer 1

Beh, io sono il vostro sono Hidding sicuro che hai capito che il problema è il padding che bootstrap è appliyng allo <td>.

D'altra parte, se si attiva la diapositiva sullo <td>, diventa strano perché non nasconde l'overflow del div.

una soluzione semplice per questo è per alternare entrambi (td e div), allo stesso tempo:

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

Updated JsFiddle

Answer 2

Poiché si nascondono i <div> s all'interno di <td> s, non gli stessi <td> s.

Answer 3

La soluzione che soddisfa le vostre esigenze è sufficiente aggiungere una classe chiamata "td-padding" e attivarla come te alternare la diapositiva $('tr[class^=child-]').toggleClass(".td-padding");

è necessario rimuovere anche la dichiarazione imbottitura .table th, .table td { padding: 5px; } che hai avuto. JsFiddle: http://jsfiddle.net/Papibarozza/0Lh5ozyb/46/

Il padding che rimane è incorporato nell'elemento HTML stesso (chiamato border-spacing nel foglio di stile utente dell'agente in chrome devtools).

Questo porta al mio prossimo punto che voglio fare. Sei sicuro di aver davvero bisogno di implementarlo con un tavolo e tablecell? Ti suggerirei di usare una lista da allora e UL all'interno di una UL ha una relazione logica figlio-genitore. Molto del tuo codice va a distinguerlo, con un sacco di nomi di classe e complessità come risultato. Con la relazione UL> UL si può semplicemente chiamare $(".parent").children() su un elemento cliccato. Anche l'imbottitura potrebbe essere completamente personalizzata.

Answer 4

provare questo http://jsfiddle.net/0Lh5ozyb/56/

Bootstrap sta costringendo imbottitura più i div non è l'elemento td che ha il 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

Aggiungi classe per la riga padre e rimuovere l'imbottitura per la sua td.

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

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