时间戳

首页 > 解决方案 > 在下一个 i 标签上更改字体真棒图标

jquery - 在下一个 i 标签上更改字体真棒图标

问题描述

我有一架手风琴，里面有几个手风琴。基本结构是这样的

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

但这似乎同时改变了所有这些，而不仅仅是折叠的部分。

我也尝试过最接近和下一个，但这似乎没有任何作用。

我怎样才能让它改变正确的图像？

谢谢

标签： jquerytwitter-bootstrapfont-awesome

解决方案

如果您不介意添加点击事件而不是显示/隐藏事件，您可以尝试这样做：

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

推荐阅读