表格行上的Bootstrap折叠没有动画

时间:2019-04-20 03:03:02

标签: css bootstrap-4

我用这样的引导程序4创建了一个表

<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>

,但是当我们放置“ collapse”类时,行为似乎与我们放置“ collapse”类不同。如您所见,如果单击animate div,则目标div会平滑地动画,但是当我们单击animate tr时,tr不会动画,我可以为tr设置动画吗?我已经完成研究,但没有找到满意的答案

1 个答案:

答案 0 :(得分:1)

我不是将tr class="collapse" id="collapseProduct0"上的tr分配给了一个新的div,现在它覆盖了<div class="card card-body">... </div>;这样做(从引导程序中)留下了填充-为了摆脱这种填充,我们引入了一个新类,该类确保当行处于折叠状态时,那里什么也没有。

下面的代码应该可以为您提供所需的信息...

.collapseContainingDiv td {
  padding: 0 !important;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="collapseContainingDiv">
        <td colspan="6">
          <div class="collapse" id="collapseProduct0" style="">
            <div class="card card-body">SECOND 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>
        </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>