javascript - 在 Bootstrap 4 中折叠卡片表行时更改字体真棒图标
问题描述
在折叠卡片表中的一行时，我遇到了更改字体真棒图标的问题。
如何使用 javascript 创建它？也就是说，当我单击一行时，图标会更改为折叠的项目和打开的项目。
我有以下代码：
打开图标：fas fa-chevron-down
行关闭时的图标：fas fa-chevron-right
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="list-group-item" id="headingOne">
<h5 class="mb-0">
<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Configure which userdata to show for voice interactions</label>
</label>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="card-block">
<li class="list-group-item">
<div>
<div class="card-block">
<div class="card-header">
<div class="row">
<div class="col-md-3"><b>Label</b></div>
<div class="col-md-3"><b>Userdata</b></div>
<div class="col-md-6 text-right">
<button type="button" data-toggle="modal" data-target="#optionModal" class="btn btn-default btn-sm"><i class="fa fa-plus-circle"></i> <b>Optie</b> toevoegen</button>
</div>
</div>
</div>
<div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingTwo">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Con</label>
</label>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingThree">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">ctions</label>
</label>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
</div>我必须做到的：
<script>
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent().parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
</script>
但是它对所有记录都崩溃了，如何仅对打开/关闭的记录进行此操作。
解决方案
你只需要上一级家长...
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
推荐阅读
- c - 如何使用 bison/flex 在 C 代码的头文件中解析自定义数据类型的类型？
- javascript - 旋转卡动画故障
- reactjs - 我尝试从 firestore 获取一次数据，但我为集合中的每个文档接收三次
- javascript - 即使在浏览器中禁用 JavaScript 也提交 Ajax 表单？
- firebase - Flutter/Firebase：如何减少对推送/弹出调用的 StreamBuilder 调用？
- javascript - 简化不等于 && 条件
- c# - 如何使用 Leaf.xNets HttpRequest 在 Post-Request 中使用正文？
- elasticsearch - 弹性搜索词的顺序
- vuetify.js - Vuetify v-app-bar 收缩不顺畅
- pagespeed - Google Pagespeed Insights 可靠吗