Jquery 在展开和折叠时更改图标

因此，我有一个侧栏菜单，我试图让用户浏览所有类别，这是一个类似于树。 我面临菜单扩展和崩溃的问题。 当菜单展开时，我希望图标展开图标变成图标折叠图标。 HTML不允许if语句，因为它不是一种编程语言。我怎样才能完成这项任务

这是我的密码

.coll{background image:url（“images/icon collapse.png”）；}

可折叠面板
单击可折叠面板以打开和关闭它

面板主体
面板页脚
面板主体
面板页脚

您可以使用jQuery，因为您已经包含了它

HTML:

您可以使用jQuery中的toggleClass，也可以使用vanilla js实现类似的行为。
ONLINE图标
首先，我邀请您不要使用图像来添加图标，而是使用web图标，例如：/

使用这些图标非常简单，在本例中，我将使用Fontawesome&这里是：



您是否尝试过使用jquery？感谢您的反馈和解决方案。：）
<!-- add on onclick JS function and pass the img element to it -->
<img onclick="changeIcon(this);" src="images/icon-expand.png" data-toggle="collapse" href="#collapse1"><a .... 

<script>
function changeIcon(theImage)
{
  var expand = 'images/icon-expand.png';
  var collapse = 'images/icon-collapse.png';
  var thePic = $(theImage).attr('src'); // use jQuery to get the current image

  // now set the src attribute according to its current state
  if(thePic==expand){ $(theImage).attr('src',collapse); }
  if(thePic==collapse){ $(theImage).attr('src', expand); }
}
</script>