Javascript 如何更改自定义手风琴的图标？

我们创建了一个自定义的accordion库，它将根据单击的内容切换.content元素，类似于jqueryaccordion。在.header元素旁边，我们将显示一个。我遇到的问题是，内容会隐藏和显示，但图标不会切换

如何切换内容元素和图标

当前问题：

期望输出：

$function{ $'.header'。单击，函数{ var hdr=$this； var祖父母=hdr.parent.parent； 祖父母.find'.item.active'.removeClass'active'； grandParents.find.content.stop.slideUp.removeClass'active'； hdr.closest'.item'.find'.content'.stop.slideToggle； toggleClass'active'； }; }; .内容{ 显示：无； } .item.active>.content{ 显示：块； } .item.active>.header{ 颜色：白色； 背景色：黑色； } .标题{ 填充：16px； 利润率：8px； 背景颜色：浅灰色； } 第一环节 这里有一些内容 第二环节 这里有一些内容 第三环节 更多内容

---

我已经更新了你的js代码，请检查。“我的更新”的一般概念是，每次单击时，图标都会被删除并替换为一个新的但不同的图标，从正到负，反之亦然

这方面的问题是，Fonthouse图标的使用令人敬畏。但无论如何，看看我的代码

这是完整的工作代码。我唯一的更新是js部分

$function{ $'.header'。单击，函数{ var hdr=$this； hdr.sibbines'.content'.slideToggle； toggleClass'active'； hdr.parent.sibbins.find'.content'.slideUp； 父类.兄弟类.removeClass'active'； ifhdr.parent.hasClass“活动”{ 找到'svg'。删除； 找到'svg'。删除； hdr.prepend； hdr.parent.sides.find'.header'.prepend； }否则{ 找到'svg'。删除； hdr.prepend； } }; }; .内容{ 显示：无； } .item.active>.content{ 显示：块； } .item.active>.header{ 颜色：白色； 背景色：黑色； } .标题{ 填充：16px； 利润率：8px； 背景颜色：浅灰色； } 第一环节 这里有一些内容 第二环节 这里有一些内容 第三环节 更多内容

---

我们有同样的要求，我们必须用特定于手风琴内容的动态图标替换每个手风琴项目的+图标，如 第一手风琴-a.png 第二个手风琴-b.png等等

---

我通过向Accordion项目页面内容模板添加一个图像并将其分配给克隆的Accordion呈现来完成此操作。

根据提供的示例，标题标记中还包含svg元素。我很确定这可以通过多种方式解决。最简单的方法是根据item statusactive或not更新标题child。此外，您还可以尝试将svg转换为css样式，并根据项目状态显示不同的背景图像。您的答案将导致我最终的解决方案。我没有删除svg，而是通过Fontawesome发现，如果更改数据图标属性，它会更改图标。所以我在if-else的内部将负数改为正数，并将正数改为负数。很高兴这有帮助：