如何组合箭头以突出显示列表中的项目？(jQuery的)

<ul>
  <li><span class="arrow"></span>项目1</li>
  <li><span class="arrow"></span>项目2</li>
  <li><span class="arrow"></span>项目3</li>
</ul>

.arrow {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid black;
  border-right: 2px solid black;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.arrow.active {
  transform: rotate(225deg);
}

$(document).ready(function() {
  $('li').click(function() {
    $(this).find('.arrow').toggleClass('active');
  });
});