Bootstrap Akkordeon Tisch glatt öffnen und schließen

Question

Ich möchte eine Bootstrap Akkordeon Tabelle erstellen. Wenn auf die Zeile geklickt wird, werden die Unterzeilen geöffnet. Sie öffnen sich gut, aber das Problem ist, dass es nicht glatt ist. Ich habe fast alles ausprobiert, aber keiner von denen hat funktioniert.

<table class="table table-hover"> 
<thead> 


<tr> 
    <th> 
    <label class="inputcheck inputcheck-lg"> 
    <input type="checkbox" id="checkall"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <th>Business Name</th> 
    <th>Category</th> 
    <th>Sub Category</th> 
    <th>Free Leads</th> 
    <th>Paid Leads</th> 
    <th>Campaign</th> 
    <th>Status</th> 
</tr> 
</thead> 



<tbody> 

    <tr data-toggle="collapse" data-target=".subrow1"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-2"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td> </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-3"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td></td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse subrows subrow1 uk-animation-4"> 
    <td> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </td> 
    <td></td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr data-toggle="collapse" data-target=".subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td> <span class="chevron_toggleable glyphicon glyphicon-plus"></span> New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse fade subrows subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Sub Row 3 </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr class="collapse fade subrows subrow2"> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Sub Row 3 </td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>Not Assigned</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox"> 
    </td> 
    </tr> 

    <tr class=""> 
    <th scope="row"> 
    <label class="inputcheck"> 
    <input type="checkbox" class="subcheck"> 
    <span class="icon"><i class="fa fa-check"></i></span> 
    </label> 
    </th> 
    <td>New Vision Electric</td> 
    <td>HVAC</td> 
    <td>Air Conditioning </td> 
    <td>05</td> 
    <td>10</td> 
    <td>HVAC Campaign 01</td> 
    <td> 
    <input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked> 
    </td> 
    </tr> 

    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 

    <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    </tr> 
    </tbody> 

</table> 

Demo: https://jsfiddle.net/d2hfbh1p/

Answer 1

Sie sollten versuchen, immer vermeiden, dass die Einbrüche auf dem Artikel auszuführen kollabiert werden.

Wenn ein Element zum Einsturz versuchen, was sollte man das Element in einem <div>-Tag und fügen Sie die .collapse Klasse zum <div> tun ist, wickelt. Um es zu vervollständigen, sollte das data-target Ziel das <div> Element, das Sie reduzieren möchten.

<tr data-toggle="collapse" data-target=".subrow1> 
... 
<div class="collapse subrow1"> 
    <tr class=...>... 
</div>