Jquery 更改下一个i标签上的字体图标

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

正如您所看到的，每个

手风琴标题

都有一个右V字形字体。展开后，我想将其更改为

fa chevron down

起初，我试过了

$（'.accordion'）。打开（'show.bs.collapse hide.bs.collapse'，函数（e）{
$（this）.find（'i'）.toggleClass（'fa-chevron-right fa-chevron-down'）；
});

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

我也尝试过最近的和下一个，但这似乎没有做任何事情

如何更改正确的图像

---

谢谢

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

$('#accordianHeader').click(function(){
    $(this).find('i').toggleClass('fa-chevron-right fa-chevron-down');
});

请结帐

更新：

另一种方式（可能是您的首选方式）：

不需要

元素，也不需要令人讨厌的jQuery，您可以在纯CSS中实现这一点：

.accordio-toggle:not（[aria-expanded]）：之后，
.手风琴切换[aria expanded=“false”]：在{
字体系列：Fontsome；
内容：'\f054'；
}
.手风琴切换[aria expanded=“true”]：之后{
字体系列：Fontsome；
内容：'\f053'；
}

除了

标记->

---

对于代码列表->

，唯一的问题是我需要为每个标题执行其中一个。我想使用一个类来避免重复答案。请核对一下。

$('.accordion').on('show.bs.collapse hide.bs.collapse', function (e) {
    $(this).find('i').first().toggleClass('fa-chevron-right fa-chevron-down');
});