带有Bootstrap 4折叠和图像的折叠箭头

Question

我的折叠箭头不适用于折叠菜单的子元素。它可以使用图像/按钮正常工作，但是当我打开或关闭内部折叠菜单时，它不应更改。我试图将$('.test-collapse')更改为$('.test-collapse button')，但是它也不起作用。

这是我的jsfiddle：http://jsfiddle.net/sm8ck0gf/4/。由于某些原因，我无法使其与stackoverflows自己的代码段一起使用。

$(document).ready(function() {
  $('.test-collapse')
    .on('shown.bs.collapse', function() {
      $(this)
        .parent().parent()
        .find(".test-double-right")
        .removeClass("fa-angle-double-right computers-double-right")
        .addClass("fa-angle-double-down test-double-down");
    })
    .on('hidden.bs.collapse', function() {
      $(this)
        .parent().parent()
        .find(".test-double-down")
        .removeClass("fa-angle-double-down test-double-down")
        .addClass("fa-angle-double-right test-double-right");
    });
});

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<div id="accordion" role="tablist" class="col-lg-4 col-xl-5" align="left">
  <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#test" aria-expanded="false" align="left" style="position:relative;">
    <span id="rock"><img src="https://s3.amazonaws.com/media.eremedia.com/uploads/2012/08/24111405/stackoverflow-logo-700x467.png"  class="" width="50%" height="auto" /></span>
    <span class="text-link-left" style="font-family: 'Roboto', sans-serif; font-family:FontAwesome;">
      <i class="fas fa-angle-double-right test-double-right" aria-hidden="true"></i>
    </span>
  </button>
  <div id="test" class="collapse test-collapse" style="padding-right:5px;padding-left:8px;">
    <div class="card col-xl-12 col-md-12 col-lg-12" align="left" style="margin-top: 0px;">
      <div class="card-header " role="tab" id="testid">
        <h5 class="mb-0">
          <a data-toggle="collapse" href="#test-control" role="button" aria-expanded="false" aria-controls="test-control">
          Test
        </a>
        </h5>
      </div>
      <div id="test-control" class="collapse" role="tabpanel" aria-labelledby="testid" data-parent="#accordion">
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item">
              <b>Test information</b>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <br/>
  </div>
</div>