如何在活动的Bootstrap 4下拉列表中旋转箭头图标？

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
    下拉列表 <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

.dropdown .caret {
  transition: transform 0.3s ease;
}

.dropdown.show .caret {
  transform: rotate(180deg);
}

$('.dropdown-toggle').click(function() {
  $(this).find('.caret').toggleClass('rotate');
});