我用bootstrap 4创建了一个这样的表，但似乎当我们把“collapse”类放在表行上时，它的行为与我们放在div元素上时不同。正如你所看到的，如果我们点击animate div，目标div将平滑地动画，但当我们点击animate tr时，tr没有动画，我怎么能这样动画tr呢？
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card-body justify-content-center">
<p><a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseProduct" role="button" aria-expanded="false" aria-controls="collapseProduct">Animate div</a><button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#collapseProduct0"
aria-expanded="false" aria-controls="collapseProduct0">Animate tr</button></p>
<div class="collapse" id="collapseProduct" style="">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</div>
<table class="table table-hover">
<tbody>
<tr>
<th>Name</th>
<th>Description</th>
<th>Product Group</th>
<th class="text-center">Taxable</th>
<th class="text-center">Tax Included</th>
<th></th>
</tr>
<tr>
<td>Bitwolf</td>
<td>Focused value-added access</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct0" aria-expanded="false" aria-controls="collapseProduct0"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct0" style="">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Keylex</td>
<td>Focused client-driven groupware</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary collapsed" data-toggle="collapse" data-target="#collapseProduct1" aria-expanded="false" aria-controls="collapseProduct1"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct1" style="">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Cardguard</td>
<td>Realigned zero defect policy</td>
<td>Sepatu Futsal</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct2" aria-expanded="false" aria-controls="collapseProduct2"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct2">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Temp</td>
<td>Monitored zero defect groupware</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct3" aria-expanded="false" aria-controls="collapseProduct3"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct3">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Zontrax</td>
<td>User-friendly multimedia interface</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct4" aria-expanded="false" aria-controls="collapseProduct4"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct4">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Andalax</td>
<td>Assimilated global forecast</td>
<td>gtr</td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td class="text-center"><i class="fa fa-check text-info"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct5" aria-expanded="false" aria-controls="collapseProduct5"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct5">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
<tr>
<td>Domainer</td>
<td>Future-proofed intangible focus group</td>
<td>Sepatu Bola</td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td class="text-center"><i class="fa fa-times text-danger"></i></td>
<td>
<div class="btn-group" role="group" aria-label="Basic example"><button type="button" class="btn btn-outline-primary" data-toggle="collapse" data-target="#collapseProduct6" aria-expanded="false" aria-controls="collapseProduct6"><i class="fa fa-pencil"></i></button><button type="button" class="btn btn-outline-danger"
data-toggle="modal" data-target="#exampleModal"><i class="fa fa-trash"></i></button></div>
</td>
</tr>
<tr class="collapse" id="collapseProduct6">
<td colspan="6">
<div class="card card-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</div>
</td>
</tr>
</tbody>
</table>
</div>字符串
1条答案
按热度按时间uinbv5nw1#
而不是
tr上的tr class="collapse" id="collapseProduct0".我只是把它交给一个新的div，它现在覆盖了<div class="card card-body">... </div>;这样做留下了一个填充（从 Bootstrap ）-为了摆脱这个填充，我们引入了一个新的类，确保当行处于折叠状态时，那里什么都没有。下面的代码应该会让你得到你正在寻找的东西...
个字符