[英]Change Font Awesome Icon on next i tag
我有一个手风琴,里面有几个手风琴。 基本结构是这样的
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo" id="accordianHeader">
Main Title <i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion2">
<div class="accordion-group mtb-10">
<div class="accordion-heading">
<a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerOne">
Inner Title One <i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div id="collapseInnerOne" class="accordion-body collapse in">
<div class="accordion-inner">
</div>
</div>
</div>
<div class="accordion-group mtb-10">
<div class="accordion-heading">
<a class="accordion-toggle font-weight-bold" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo">
Inner Title Two <i class="fa fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
<div id="collapseInnerTwo" class="accordion-body collapse">
<div class="accordion-inner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
如您所见,每个accordion-heading
都有一个字体 awesome fa-chevron-right
。 展开后,我想将其更改为fa-chevron-down
起初,我试过
$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
$(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
});
但这似乎同时改变了所有这些,而不仅仅是折叠部分。
我也尝试过最接近和下一个,但这似乎没有任何作用。
我怎样才能让它改变正确的图像?
谢谢
如果您不介意添加点击事件而不是显示/隐藏事件,您可以尝试这样做:
$('#accordianHeader').click(function(){
$(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
});
请检查这个小提琴。
更新:
另一种方式(可能是您的首选方式):
$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
$(this).find('i').first().toggleClass('fa-chevron-right fa-chevron-down');
});
不需要<i></i>
元素,也不需要讨厌的 jQuery,你可以在纯 CSS 中做到这一点:
.accordion-toggle:not([aria-expanded]):after,
.accordion-toggle[aria-expanded="false"]:after {
font-family: FontAwesome;
content: '\f054';
}
.accordion-toggle[aria-expanded="true"]:after {
font-family: FontAwesome;
content: '\f053';
}
除<i>
标签之外的带有上述标记的演示 -> http://jsfiddle.net/1drLbqpz/
有关 FontAwesome 代码列表 -> https://fontawesome.com/cheatsheet
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.