html - 在卡片中添加折叠页脚(引导程序)
问题描述
我做了三个块——在引导程序中使用 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 -->
解决方案
像这样?有关更多信息,请访问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>
推荐阅读
- rest - Rest 或 RestQL 或 Falcor 或 GraphQl
- c# - 如何将 swagger 与 Azure Active Directory OAuth 集成
- swift - window.windowController 在 windowWillClose() 内为零,但不在 viewDidAppear() 内
- angular - 角度“as”关键字实际上在做什么?
- c++ - 我如何判断一个类型是否是函子?
- vb.net - MaskedTextBox 和 DateTimePicker 仍然不支持 Nullable 日期?
- javascript - 解析动态 JSON 对象
- javascript - 如何修复在下拉列表中传递两个参数
- c - 关于用数组分配指针变量的 GCC 警告?
- asp.net-core - 使用 IFormFile 上传名称中带有破折号“-”的文件