在卡片中添加折叠页脚（引导程序）答案

【问题标题】：Add a Collapsing Footer in a Card (Bootstrap)在卡片中添加折叠页脚（引导程序）
【发布时间】：2020-04-20 05:01:20
【问题描述】：

我做了三个块——在 bootstrap 中使用 CARD 类。效果很好。现在我想在允许“显示/隐藏详细信息”的卡片上添加一个页脚（或只是一个 div）。

我尝试了 10 种不同的方法，但由于某种原因，卡片总是“断裂”。我有适用于卡片的代码，但没有崩溃

目标是折叠最后 3 行，同时“显示付款计划”更改为“隐藏付款计划”。

谁知道怎么去那里？在不破卡的情况下，将 div 类放在哪里可以折叠？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<!-- Wrapper for Cards -->
<div class="row mx-n2">
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">

    <!-- Card 1 -->
    <a class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/monthly.gif" alt="Monthly Animation">
      <div class="card-body">
        <h4>Monthly</h4>
        <p class="font-size-1 text-body mb-0">You will be charged every month the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 43</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <span class="font-size-1 text-black-50">Show payment schedule</span>
        <div class="row pt-2">
          <div class="col">
            <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 43</span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">June 2020</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 43</span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 43</span>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </a>
    <!-- End Card 1 -->

  </div>
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">

    <!-- Card 2 -->
    <a class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/quarterly.gif" alt="Quarterly Animation">
      <div class="card-body">
        <h4>Quarterly</h4>
        <p class="font-size-1 text-body mb-0">You will be charged every third month the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 102</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <span class="font-size-1 text-black-50 ">Show payment schedule</span>
        <div class="row pt-2">
          <div class="col">
            <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 102</span>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">July 2020</span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">July 2020</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 43</span>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </a>
    <!-- End Card 2 -->
  </div>
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
    <!-- End Card 3 -->
    <a class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
      <div class="card-body">
        <h4>Annually</h4>
        <p class="font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <span class="font-size-1 text-black-50">Show payment schedule</span>
        <div class="row pt-2">
          <div class="col">
            <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 408</span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 408</span>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
          </div>
          <div class="col">
            <span class="font-size-1 text-black-50">USD 408</span>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </a>
    <!-- End Card 3 -->
  </div>
</div>
<!-- End Wrapper for Cards -->

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

像这样？欲了解更多信息，请访问https://getbootstrap.com/docs/4.4/components/collapse/

说明

我加了

data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"

到你的span 所以，它就像collapsable toggler 一样工作，并添加了root div

class="collapse show" id="collapseExample"

到你的三个项目，所以只有一个 div 可以折叠。

document.querySelectorAll('.change_text').forEach(cur => {
  cur.addEventListener('click', e => {
    const target = e.target;
    if (target.textContent === 'Show payment schedule') {
      target.textContent = 'Hide payment schedule';
    } else {
      target.textContent = 'Show payment schedule';
    }
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div class="row mx-n2">
  <div class="col-sm-6 col-md-4 px-2 mb-3 mb-md-0">
    <!-- End Card 3 -->
    <div class="card h-100 transition-3d-hover" href="#">
      <img class="card-img-top" src="../../assets/img/480x220/yearly.gif" alt="Yearly Animation">
      <div class="card-body">
        <h4>Annually</h4>
        <p class="change_text font-size-1 text-body mb-0">You will be charged once every year the amount of</p>
        <h3 class="text-center font-weight-bold text-black-50 mb-0 mt-4">USD 408</h3>
      </div>
      <hr/>
      <!-- Collapsing Footer -->
      <div class="card-footer border-0 pt-0">
        <a class="change_text font-size-1 text-black-50" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Show payment schedule</a>
        <div class="collapse show" id="collapseExample">
          <div class="row pt-2">
            <div class="col">
              <span class="today font-size-1 text-black-50" data-toggle="tooltip" data-html="true" id="today">Today</span> </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2021</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <span class="font-size-1 text-black-50" data-toggle="tooltip" data-html="true" title="placeholder">April 2022</span>
            </div>
            <div class="col">
              <span class="font-size-1 text-black-50">USD 408</span>
            </div>
          </div>
        </div>
      </div>
      <!-- End Collapsing Footer -->
    </div>
    <!-- End Card 3 -->
  </div>
</div>

【讨论】：

谢谢尼沙格。是的，差不多。现在只有两个小问题：a）点击它时，整个卡都被点击（不应该）b）点击后如何将“显示付款时间表”更改为“隐藏付款时间表”？跨度>
改名需要用JS，好的，等我更新答案
如果我添加一个真实的汽车链接：google.com"> 然后我每次点击折叠，我直接登陆谷歌。页脚应该独立工作。
我最近展示了，你的整个卡片都用a 标签包裹，所以它的自然行为
感谢@Nisharg 的耐心等待——我是新手。当我将a 标签移到折叠菜单上方时，它也不起作用。

【解决方案2】：

看起来您的折叠部分只是嵌套在父 card 元素中的另一个 card 元素。根据文档，Bootstrap 有一个Collapse element，当触发动画的元素是link 时，它与data-toggle="collapse" 结合使用。当触发动画的元素是div 时，就像你的情况一样，你必须给它类collapse。

文档显示了两者的示例。尝试第二部分：

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <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>

【讨论】：