在下一个i标签上更改Font Awesome图标

时间:2018-09-03 20:19:20

标签: jquery twitter-bootstrap font-awesome

我有一个手风琴,它又有几个内部手风琴。基本结构就是这样

<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');
});

但这似乎可以同时更改所有内容,而不仅仅是折叠部分。

我也尝试过使用close和next,但这似乎无济于事。

如何更改正确的图像?

谢谢

2 个答案:

答案 0 :(得分:1)

如果您不介意添加点击事件而不是添加show / hide事件,则可以尝试这样做:

$('#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');
});

答案 1 :(得分:0)

不需要<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