我有一架手风琴,而手风琴又有几支内置手风琴。基本结构是这样的
<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
都有一个字体真棒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');
});
请查看这个fiddle。
更新:
另一种方式(可能是你喜欢的方式):
$('.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/
有关Font Awesome代码列表 - > qazxsw poi