使用Jquery在Bootstrap折叠上更改图标

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  折叠内容
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这是折叠的内容
  </div>
</div>

$(document).ready(function() {
  $('.btn').click(function() {
    $(this).find('i').toggleClass('bi bi-chevron-down bi bi-chevron-right');
  });
});