好的,我已经尝试了几种方法(JS 和 CSS),但我无法让它工作。当一个 div 通过 Bootstrap 折叠时,我需要将一个加号 Font Awesome 图标更改为一个减号(即添加一个新的 div 代替另一个或只更改 div 的类)。
我看过类似的问题,但终究无法解决。
这是我的 html:
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"><i class="fa fa-plus-square-o"></i><i class="fa fa-minus-square-o"></i><span style="margin-left: 12px; display: inline-block;"></span>Lab Focus: Cloud Management with vRealize Operations & <nobr>vRealize Automation</nobr></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<span style="font-family:'proximanova-light', sans-serif;font-size:15px; line-height:19px; text-align:left; color: #565656;">
<p>Deliver intelligent operations management across physical, virtual, and cloud infrastructures and accelerate the deployment and management of applications and compute services, improving business agility and operational efficiency.</p>
当我点击 div 并打开时(它是一个 Accordion div)我需要将 fa-plus-square-o
更改为 fa-minus-square-o
然后在 div 折叠时再次返回。因为我有其中的 8 个,所以我尝试使用 JS 和 this
:
$(".collapsed").click(function() {
console.log("panel clicked");
var downPanel = "";
$(this).html(downPanel);
$('.fa-plus-square-o', this).remove();
$('.fa-plus-minus-o', this).add();
});
还有其他几个变体,但没有任何效果。然后我尝试使用 CSS 将类更改为 collapsed1:
.collapsed1 .fa-minus-square-o,
.collapsed1.collapsed .fa-minus-square-o {
display: inline-block;
}
.collapsed1.collapsed .fa-plus-square-o,
.collapsed1 .fa-plus-square-o {
display: none;
}
然而,这会导致一直显示减号或两个图标。我是 JS 新手,需要一些帮助。
如何根据 div 是否折叠来更改图标?
最佳答案
只需切换类:
$('.collapsed').on('click', function() {
$(this).find('i')
.toggleClass('fa-minus-square-o')
.toggleClass('fa-plus-square-o')
});
关于javascript - JS : change icon in div on Bootstrap collapse?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39049405/